Javascript.RU

Div в две колонки float left. Две колонки, навигация слева. Резиновая верстка

На сайтах которые с давних пор стали псевдо учебниками, говеные школьники предлагают решения верстки двух колонок с помощью слоев.

http://htmlbook.ru/content/dve-kolonki-navigatsiya-sleva

Вся говеность раскрывается не сразу, а во время применения в главном слое контента float:left; с завершающим слоем clear:both;

В итоге говно верстка полностью разламывается на двое превращая и так кривой сайт в унылое говно.

Решение проблемы можно подсмотреть на mail.ru или на другом подобном криво сервисе.

Но даже там все прописано в процентах.

А как же сделать так чтобы левая менюшка была по ширине в 237 пикселей, а правое поле контента растягивалось на 100%

Вот тут даже сервисы типа мэил ру не помогут, потому как там не стали париться и все намалевали в процентах.
Американ сервис предлагающий платные шаблоны за большие бабки (оттуда кстати слил себе шаблончик 1хрен битрикс админ панели) тоже все хреначит на процентах..

Пролистав гугле порядка 30 первых сайтов по данному вопросу решил написать тут свое решение которое должно привести в ступор школоту и дать базу для реальных кодеров.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
 .main {
        padding: 0 0 0 237px;
        border: 1px solid #ff0000;
 }
.pageLeft {
    float: left;
    margin-left: -237px;
    overflow: visible;
    padding-top: 15px;
    width: 237px;
    border: 1px solid #000000;
    position: relative;
}
.pageContent {
    float: left;
    margin-right: -100%;
    padding-top: 18px;
    width: 100%;
    border: 1px solid #000000;
    position: relative;
}
.clear {
    border: none;
    clear: both;
    float: none;
    font-size: 0;
    height: 0;
    line-height: 0;
}
.block {
    float: left;
    width: 150px;
    height: 50px;
    border: 1px solid #0000ff;
}
</style>
    </head>
    <body>
        
        
        <div class="main">
            <div class="pageLeft">1230</div>
            <div class="pageContent">123
                <div class="block">
                    123000
                </div>
                <div class="block">
                    123000
                </div>
                <div class="block">
                    123000
                </div>
                <div class="block">
                    123000
                </div>
                <div class="clear"></div>
            </div>
            
            <div class="clear"></div>
        </div>
        
    </body>
</html>

Решение в песочнице

-2

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
14 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum