Плавающие элементы.
Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом. Следует понимать, что никто и нигде не плавает, поэтому правильнее говорить «обтекаемые элементы», но с другой стороны термин «плавающий элемент» давно уже прижился, так что его и будем использовать в дальнейшем. Плавающие элементы достаточно активно применяются при верстке и в основном служат для воплощения следующих задач:
* Обтекание картинок текстом.
* Создание врезок.
* Расположение слоев по горизонтали (добавление колонок).
Все это выполняет один стилевой параметр float, а помогают ему в этом другие свойства.

По умолчанию слои выстраиваются по вертикали один под другим, но при помощи свойства float их можно заставить располагаться рядом по горизонтали. При этом требуется установить ширину слоев и задать для них атрибут float, как. Поскольку для второго слоя также применяется обтекание, то добавленный ниже текст помещается справа от слоя. Избежать этого поможет параметр clear, он отменяет действие свойства float.
.layer3 {
clear: both; /* Отменяем обтекание */
}
Создание колонок при помощи float имеет ряд особенностей. Первая, как уже упоминалась, состоит в том, что после плавающих элементов требуется добавлять элемент со свойством clear, который выключает обтекание. Это необходимо в том случае, если предполагается использовать нижележащие слои. Вторая особенность связана с представлением плавающих слоев. Если окно браузера уменьшить до определенного предела, то слои перемещаются по вертикали. Существуют способы, как избежать подобного поведения слоев. Плавающие элементы используются на веб-странице обычно для того, чтобы установить вокруг объекта обтекание текста. В качестве таких объектов могут применяться рисунки или слои, содержащие изображения и надписи. Для создания обтекания предназначен стилевой атрибут float со значением left или right. Аргумент left выравнивает слой, к которому добавлен параметр float, по левому краю, а обтекание происходит по свободным сторонам, в том числе и левому краю. Значение right, наоборот, выравнивает слой по правому краю. Кроме такой очевидной ориентации плавающих элементов, с их помощью можно располагать слои по вертикали и таким образом формировать колонки. Хотя свойство float исходно не предназначалось на такую роль, создание многоколонного макета веб-страницы на основе этого параметра достаточно устоялось. Такой способ имеет некоторые недостатки, но их можно учитывать и применять в своих целях. Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем мы будем активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается. Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега <LAYER>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Что характерно, все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <LAYER> не был включен в спецификацию HTML и так и остался лишь расширением браузера Netscape. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «параграф» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам <DIV> и <SPAN>. Слой — это элемент веб-страницы, созданный с помощью тега <DIV> или <SPAN>, к которому применяется стилевое оформление. Таким образом, верстка с помощью слоев заключается в конструктивном использовании тегов <DIV> и стилей. При этом придерживаются следующих принципов:

1. Активное применение тега DIV
При использовании слоев существенное значение уделяется универсальному тегу <DIV>, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая ее то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при верстке с помощью слоев тег <DIV> является кирпичиком верстки, ее базовым фундаментом. Благодаря этому тегу HTML-код распадается на ряд четких наглядных блоков, за счет чего верстка слоями называется также блочной версткой. Код при этом получается более компактным, чем при табличной верстке, к тому же поисковые системы его лучше индексируют. Уже упоминалось, что слои в большинстве случаев являются независимыми друг от друга, за счет чего они как отдельные блоки могут добавляться или удаляться в макете веб-страницы. По умолчанию содержимое контейнеров <DIV> на веб-странице располагаются по вертикали, вначале идет один слой, ниже располагается следующий и т.д. При создании колонок требуется располагать слои рядом по горизонтали, для чего применяется несколько методов. Одним из распространенных является использование стилевого параметра float. Хотя он предназначен для создания обтекания вокруг элемента, с тем же успехом float устанавливает и колонки. Но здесь следует учесть одну особенность. При уменьшении окна браузера до некоторой критической ширины, колонки перестают располагаться горизонтально и перестраиваются друг под другом по вертикали. С этим фактом либо остается смириться, либо использовать другие методы формирования колонок через слои.

Флоат нужен для того чтобы двигать блоки – вправо или влево – к одной из двух сторон потока.
1. Float’нутый бокс смещается по горизонтали и прилипает к одной из сторон родителя.
2. Float’нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). Его ширина становится равной ширине контента. С его неприжатой к родителю свободной стороны появляется свободное место.
3. Следующие за ним блочные боксы подтягиваются вверх и занимают его место, как если бы float’нутого бокса в потоке не было. Т.е. подлазят под него.
4. Строчные же боксы внутри подвинувшихся наверх блоков начинают обтекать float’нутый бокс со свободной стороны.
Хочу еще раз подчеркнуть – сама коробка блока, следующего за float’ом, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает float.
Float’нутые в одну сторону боксы, которые идут один за другим:
В этом случае следующий бокс (который тоже зафлоачен) будет пытаться уместиться сбоку от предыдущего(не подлезая под него), с его свободной стороны. И только если ему там не будет достаточно места, тогда он сместится ниже и будет пытаться уместиться уже там.
Заfloat’ить можно как блочные боксы, так и строчные. При этом строчные тут же автоматически становятся блочными. То есть, писать display:block; для float’а излишне. Две особенности float’ов — прижимание к краю и стыкование сбоку друг друга — вытекают два основных применения их в раскладке:
* разделение страницы на колонки
* горизонтально расположенные меню
Колонки
Колонки — это когда блоки текста расположены рядом друг с другом и имеют одинаковую высоту.
Все колоночные раскладки я буду рассматривать на вот таком простейшем HTML’ном коде с двумя блоками:
<body>
<div id=»sidebar»> … </div>
<div id=»content»> … </div>
</body>
Сразу стоит сказать, что делать колонки в растягивающемся по ширине контейнере сложнее, чем с заданной шириной. Тут есть два принципиально разных подхода, подходящих для разных случаев.
Пропорциональная ширина
Если нужно, чтобы ширина колонок менялась пропорционально, при изменении ширины страницы, то подход такой:
#sidebar {float:left; width:30%;}
#content {float:right; width:70%;}
То есть два блока float’ятся рядом в разные стороны, а их ширина делится в нужном процентном соотношении. Этот способ позволяет легко поменять колонки местами — просто поменяв значения right и left.
Растягивание только одной колонки
Если нужно, чтобы менялась только ширина основной колонки, то предыдущий способ не подходит. Дело в том, что в CSS, к сожалению, нельзя напрямую сформулировать такую вещь как «вся доступная ширина минус конкретное число».
Теперь обратимся к одной из предыдущих статей про блоки в потоке, где я упомянул об одной их полезной особенности автоматически укладываться по ширине в размер родительского бокса. То есть, если блоку в прямом потоке задать, скажем, левый margin, то его ширина соответственно ужмется. А это именно то поведение, которого мы хотели добиться от одной из колонок. Итак, для нужного нам эффекта мы дадим основному блоку левый margin, чтобы он ужался направо, а боковую панель заfloat’им на это место:
#sidebar {float:left; width:200px;}
#content {margin-left:200px;}
Но у второго способа есть один очень серьезный недостаток. Обратите внимание, что в исходном HTML блок «sidebar» идет до блока «content» с основным содержимым. Не нужно думать, что так сделано случайно . Так сделано специально, потому что иначе этот самый второй способ с наложением колонки поверх margin’а не работал бы.
Как я написал в начале статьи, float’ы сдвигаются только в сторону и дают место следующим блоками, которые съезжают наверх. Поэтому принципиально, чтобы «sidebar» был уже наверху, и тогда основной блок подъедет к нему. Если «sidebar» идет после основного блока, то он так и останется ниже, и ни на какие колонки это похоже не будет.
Фиксированная ширина
Все резко упрощается, когда колонки помещаются в фиксированную ширину контейнера. В этом случае лучше всего использовать первый способ (float’ить все колонки), и ширину уже можно задавать не только в процентах, но и в чем хотите, поскольку ее можно точно вычислить.
Высота колонок
Опять-таки, я далеко не случайно «отрезал» на картинках нижнюю часть блоков . Иначе бы они как колонки совсем не выглядели, потому что, как нетрудно убедиться, если применить те фрагменты CSS, что я привел, и раскрасить колонки разными цветами, то их высота оказывается разной. Она зависит от количества содержимого в этих блоках.
Этот некрасивый эффект можно обойти несколькими способами.
Первый способ называется «Ложные колонки» («Faux columns»). Вместо того, чтобы назначать фон самим колонкам, они оставляются прозрачными, а вот их контейнеру назначается фоновая картинка шириной во весь контейнер и повторяющаяся по вертикали. Части этой картинки, находящиеся под разными колонками, красятся в разные цвета и при повторении вниз это дает нужный визуальный эффект. Что в ложных колонках замечательно — так это то, что вы можете не ограничивать себя на фоновой картинке ровными цветами. На ней, например можно нарисовать эффект тени между колонками, повторяющиеся горизонтальные полоски в виде фона, орнамент по краям. Недостаток же способа состоит в том, что поскольку у фоновой картинки есть только один размер, ее нельзя применять для пропорционально растягивающихся колонок, так как картинка тянуться не будет. Второй способ:
Есть таки способ, и совершенно нормальный. Итак, у нас есть колонки переменной ширины, левая 70% и правая 30%. Требуется положить под них фоновую двухцветную картинку так, чтобы левые 70% всегда закрывались одним цветом, а правые 30% – другим. Оказывается, достаточно сделать эту картинку очень длинной. Пусть будет 3000 пикселов. Делим ее на то же самое отношение: 2100 пикселов одним цветом, 900 – другим. А теперь:
div {background:url(bg.png) 70% 0 repeat-y;}
Вот эти 70% – это позиция фоновой картинки по горизонтали. Но работает она просто гениально: берется точка в 70% слева на картинке и совмещается с точкой в 70% слева ширины блока. А у нас как раз на картинке по 70% идет граница цветов, а по 70% блока – граница колонок. Вот так и получается, что эти границы всегда совпадают. А лишняя ширина картинки просто вылезает с обеих сторон за пределы блока, ее там не видно. Кстати, если подумать чуть дальше, то становится понятно, что позиционирование фона только так и может работать:
- если поставить 0, то нулевая точка картинки совмещается с нулевой точкой блока – левое выравнивание
- если поставить 50%, то середина картинки совмещается с серединой блока
- если поставить 100%, то самая правая точка картинки (это и есть 100% от левого края) совмещается тоже с правой точкой блока

по поводу порушенной семантики и необходимости ставидь сайдбар выше контента:в силу оптимизационных причин необходимо контент (с h1 и текстом) ставить в самом-самом верху. делаем так:

<div class=»container»>
<div class=»content»><h1>Заголовок</h1> текст </div>
<div id=»sidebar»><h2>Заголовок</h2>текст</div>
</div>

.container{float:left;width:100%;}
.content{float:right;width:70%;margin-left:-70%;}
#sidebar{float:left;width:30%;margin-left:-30%;}

ну далее можно и faux columns или что там по вкусу. Посмотрите внимательней, я написал, что проблема с порядком следования колонок возникает только в случае, когда ширина одной из колонок не задана. Из-за этого их невозможно двигать margin’ами. Кстати, margin’ы в случае двух колонок лишние, тут вполне можно обойтись разными float’ами (left и right).
Выше давали ссылки про overflow.
Вместо выставления контейнеру
width: 100%;
можно делать
zoom: 1; – свойство hasLayout

А вот для случая, когда одна из колонок фиксирована по ширине, фон приспособить можно. Суть состоит в том, чтобы поместить фоновую картинку только под ту колонку, ширина которой известна. Остальное место будет занято фоновым цветом контейнера, а не картинкой. Возьмем наш пример и сделаем колонку «sidebar» справа шириной 200 пикселов, а «content» пусть растягивается. Для «sidebar» подготовим картинку размерами 200х1 например ровного синего оттенка. А под «content» отведем желтоватый.
В стилях это выглядит так:
#sidebar {float:right; width:200px;}
#content {margin-right:200px;}
body {background:url(bg.png) #FFD right top repeat-y;}
Единственное правило для контейнера (body) задает все поведение фона:
* указывается URL картинки (bg.png)
* цвет фона в тех местах, где ее не будет (#FFD)
* положение картинки прижатой к правому краю (right top)
* повторение картинки вниз (repeat-y)

Другой способ уравнивания колонок по высоте был описан недавно и уже сильно известен, поскольку удобен. Идея его состоит в том, чтобы неравенство высот колонок спрятать, неимоверно удлинив их вниз, чтобы их концы были за пределами реального содержимого страницы. Добиваются этого тем, что сначала ставят колонкам очень большой отступ (padding) вниз, который закрашивается цветом фона. А чтобы все остальное содержимое тоже не сдвигалось туда далеко, колонкам назначается отрицательная граница (margin) такого же размера:
#content, #sidebar {
padding-bottom:32767px;
margin-bottom:-32767px;
}
Странное число обусловлено тем, что это максимум, который может позволить браузер Safari. На самом деле оно не настолько странное. Кому интересно, это максимальное знаковое целое число, если представлять его 16 битами.

В итоге все, что идет за колонками смещается и находится прямо под содержимым самой длинной из них, а колонки удлиняются вниз. Некрасиво одно — из-за длинных колонок сама страница становится такой же длинной. Чтобы с этим бороться, надо их контейнеру проставить свойство overflow:hidden, которое заставляет контейнер просто отрезать и не показывать то, что выходит за его пределы. У моего примера, который я взял в самом начале, есть, правда, одна загвоздка. Там колонки лежат прямо в body. А если body проставить overflow:hidden, то браузеры отменяют скроллинг у страницы начисто. Даже если реальное содержимое выше окна. Поэтому колонки надо завернуть в еще один элемент, например div. Но справедливости ради надо сказать, что на практике колонки и так бывают во что-нибудь уже завернуты.
Как я не особенно прозрачно намекнул в самом начале, поскольку float’ы не придумывались как средство создания колонок, это обязательно вылезет чем-нибудь уродливым и аукнется увеличением расхода анальгина. Причем «вылезет» — в прямом смысле. Давайте немного подвинем наш «голый» пример в сторону реальности, добавив над колонками шапку и внизу какой-нибудь тоже блок с текстом.

<body>
<div id=»header»>…</div>
<div id=»main»>
<div id=»content»>…</div>
<div id=»sidebar»>…</div>
</div>
<div id=»footer»>…</div>
</body>

Для простоты выберем нехитрый колоночный дизайн с фиксированной шириной. Шапку и нижний блок сделаем синими с белыми буквами, основное содержимое белым, а дополнительную колонку тоже синей, но чуть светлее. Цвета колонкам зададим способом «Faux columns».

/* Раскладка в колонки */

body {
width:600px;
margin:0 auto;
}

#content {
float:left; width:450px;
}

#sidebar {
float:right; width:150px;
}

/* Цвета */

#main {
background:url(bg.png) right top repeat-y;
}

#header,
#footer {
background:#238; color:white;
}

Всякие отступы и шрифты я снова опустил для простоты восприятия. Добавим тестового текста и запускаем:

Хм… Ну, колонки, в общем, даже можно разглядеть! Чтобы понять, почему так происходит, надо вспомнить описание того, как работает float. А именно, что блоки, идущие за float’ами перестают эти float’ы замечать и подтягиваются вверх. Более того, сам контейнер, в котором float’ы находятся, тоже перестает их замечать и float’нутые блоки проваливаются через низ контейнера, если он заканичвается раньше. Теперь посмотрим на наш код. Оба float’нутых блока «content» и «sidebar» находятся внутри блока «main». И больше ничего в «main» нет. А раз ему нечего больше содержать, то его высота схлопывается в нуль! Поэтому и не видно на картинке ни белого фона «content», ни светло-синего фона «sidebar», потому что эти цвета назначены в виде фона «main».
Дальше — «footer». Он, подчиняясь все тому же правилу, тоже не видит float’нутых блоков и подтягивается наверх прямо к самому заголовку (поскольку «main» — нулевой высоты). Но в «footer» есть текст. Текст этот уже должен обтекать float’ы: справа «content» и слева «sidebar». Между колонками места не осталось, поэтому текст может начаться только под одной из колонок, которая первая кончится. Там он и есть. Таким образом, «footer», подтянувшись под заголовок, продолжается вниз, пока не закончится весь его текст. И весь этот синий фон, что ниже заголовка — это «footer» и есть. Зачем надо было придумывать такие сложности: разделить понятие блока так, чтобы цвета и рамки наверх, а текст — на месте? Но смысл, конечно, есть. Это, наряду со схлопыванием границ, попытка заставить боксовую модель CSS нормально вести себя в условиях простого потока текста. Подробное классическое объяснение этому феномену есть все у того же Эрика Мейера: Представьте себе обычный поток абзацев — блоков с текстом — без всякого позиционирования. В одном из абзацев встречается картинка, которую хочется сдвинуть, скажем, влево, чтобы текст ее обтекал. Такое раньше в HTML достигалось свойством align=»left», но в духе вынесения оформления из HTML в стили, для этой функции как раз и придумали свойство float. То есть вместо align этой картинке приписывается float:left. Пусть сдвигаемая картинка занимает по высоте больше, чем текст абзаца. Если она будет растягивать свой абзац и отодвигать начало следующего ниже, то это будет выглядеть некрасиво из-за увеличенного расстояния между строками соседних абзацев. Поэтому она и проваливается через все границы блоков, сохраняя между ними красивые отступы, а текст ее обтекает.

Решения
Итак, поведение с проваливанием понятно, но оно удобно для непозиционированного текста, а для раскладки — совсем неудобно. Существует два подхода устранящих оба проявления этого свойства: подтягивание следующих боксов наверх и проваливание через низ контейнера. Для устранения подтягивания блоков существует специальное свойство — clear. Оно заставляет элемент сдвигаться вниз, пока сбоку от него не останется float’ов.
Таким образом, если мы скажем нашему «footer»у:
#footer {clear:both;}
чтобы слева и справа от него не было float’нутых колонок, то он сдвинется вниз как раз туда, где они обе кончаются.
Но это не решает другой проблемы: того, что float’ы проваливаются через «main», и тот схлопывается, в результате чего не видно колоночного фона, который ему назначен. Проваливание можно победить двумя способами. Можно явно спозиционировать контейнер каким-нибудь образом. Насколько я понимаю логику спецификации, поведение проваливания считается логичным только в простом потоке. В других случаях оно только мешает. И так оно и есть, как мы убедились. То есть достаточно назначить контейнеру например position:absolute или float:left и ничего не будет проваливается, контейнер будет полностью заключать в себя и текст, и float’ы. В нашем случае (и в большинстве случаев, кстати) это решение вполне подойдет. Другой интересный способ связан с побочным эффектом свойства overflow. Само по себе оно предназначено для того, чтобы определять, как будет вести себя контейнер при переполнении, когда не может вместить свое содержимое. Так вот побочный эффект заключается в том, что если контейнеру поставить любой overflow, кроме обычного visible, он вдруг растягивается и заключает в себя float’ы, которые в нем сидят, устраняя проваливание. Какой же overflow использовать? Сразу отпадает scroll — всегда висящие скроллбары явно не нужны. Остаются auto и hidden, которые отличаются только тем, появляется скроллбар при переполнении или нет. Но у нас никакого переполнения нет, наоборот, этим свойством мы заставили контейнер дополнительно растянуться, чтобы он охватывал все свои элементы. Поэтому использовать можно любое значение.
Я суеверно стараюсь использовать hidden, чтобы не появлялось скроллбаров, если из-за каких-то глюков переполнение вдруг возникнет. У решения с overflow есть одна загвоздка, связанная с поведением Некоторого Браузера™. Оно работает только если контейнеру явно назначены ширина или высота. Из-за этого им иногда неудобно пользоваться, когда вам нужны автоматические размеры, а не жесткие. Итак, в итоге, чтобы исправить наш пример с колонками, надо сделать так:
#main {width:100%; overflow:hidden;}
Если бы для рисования фона под колонками я использовал не faux columns, а способ с длинным padding’ом, то он бы потребовал использовать overflow:hidden для «main», что заодно решает и проблему с проваливанием.
—clear тут не самый удачный вариант. Margin clear’нутого бокса будет проваливаться вверх, под float’ы, пока не достигнет границ контейнера, в котором float’ы лежат. Поэтому, вместо clear’а чаще используют overflow: hidden на контейнер float’ов, чтобы они из него не вываливались, он, соответственно, заканчивался после них, и тогда уже margin’ы следующих элементов нормально работают.

2.Если элементы содержат вложенные блоки со стилем float: left | right, то они как бы «схлопываются». Вместе с сами блоком соответственно “схлопывается” и его фон.

“Схлопывание” float’ов лечим одним из двух способов:
/* Способ 1. (для IE установить width/height) */
#content {
overflow:hidden;
}
/* Способ 2. */
#content {
position:absolute;
/* или */
float:left;
}

3. Clear для плавающих(зафлоаченных) блоков.

Мы хотели, чтобы оба блока были обведены черной границей, но поскольку родительский блок не имеет высоты, а просто содержит плавающие блоки, все, что мы видим — это граница над плавающими блоками. Обычно для решения этой проблемы использовался дополнительный элемент, с установленным clear: both. Благодаря наличию не плавающего элемента родительский контейнер растягивался чтобы поглотить его.В любом случае решение не очень красивое, ведь мы стремимся использовать только семантические элементы, избегая создания элементов только для оформления. Решение:

Свойство width используется, чтобы включить hasLayout в IE Win (кроме IE7), работает это превосходно. Теперь граница охватывает плавающие элементы.
div.container {
border: 1px solid #000000;
overflow: auto; (или hidden)
width: 100%
}
div.left {
width: 45%;
float: left;
}

div.right {
width: 45%;
float: right;
}

Некоторые моменты требуют особого внимания:

1. Трюк работает с тремя из четырех возможных значений overflow: auto, hidden, scroll. Но в последнем случае будут видны скроллбары.
2. Некоторые браузеры требуют, чтобы для контейнера было установлено свойство width или height.
3. Браузер может показывать скроллбар если контент выходит за пределы ширины контейнера.

Необходимость width или height

Чтобы прием сработал в Opera или IE Win нужно использовать width или height. В противном случае IE не будет растягивать блок, чтобы поглотить плавающие элементы, а Opera, того хуже, полностью скроет содержимое контейнера.

Чаще всего подойдет значение width: 100%, но для сложной разметки могут потребоваться другие значения.

Примечание: проблемы возникают в случае резинового контейнера с отступами, поскольку для него невозможно подобрать width, в таких случаях, нужно планировать разметку так, чтобы у контейнеров, к которым будет применяться эта техника, отступов не было. ДляExplorer Mac: hidden:

Если для вас важна поддержка IE Mac, используйте overflow: hidden, при использовании overflow: auto этот браузер почему-то постоянно отображает скроллбары.
если контент не вмещается в контейнер по ширине, появляются нежелательные скроллбары. Лично меня удивляет, то что это считается серьезной проблемой. Используйте overflow: hidden если хотите обезопасить себя от скроллбаров. Конечно, это может привести к тому, что, выходящая за пределы контейнера, часть контента будет скрыта, но если мы будем:

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

столкнуться с этой проблемой, скорее всего не придется.
Еще более красивое решение:
В предыдущем примере используется width: 100% (или другая подходящая ширина), понятное дело, что это не всегда удобно, да и не всегда возможно. Вадим Макеев подсказывает, что включить hasLayout для IE5.5-6 можно с помощью zoom: 1, тогда окончательно решение будет выглядеть так:
div.container {
border: 1px solid #000000;
overflow: hidden;
zoom: 1;
}

div.left {
width: 45%;
float: left;
}

div.right {
width: 45%;
float: right;
}
zoom: 1 можно спрятать в условный коммент, или в отдельный файл для IE и ждать пока отомрет 6-я версия. Пока есть невалидный браузер, приходится использовать и невалидный код.

Вместо zoom: 1, можно попробовать:

div.container {
overflow: hidden;
}

* html div.container {
overflow: visible;
height:1%;
}

Валидатор подвоха не заметит, но это все таки хак.

4.

-Если див-обертку зафлоатить то она сложиться в столбик. А ширина столбика будет зависить от числа горизонтальных вложенных дивов которые тоже зафлоаченны. При зафлоачиваннии обертки она сворачивается по ширине – по ширине контента, даже если в ней вложенны 3 незафлоаченных дива, т.е. дивы встают в стопочку.
-Если из трех вложенных зафлоаченны только два то при зафлоачиваннии обертки ее ширина будет равна ширине двух дивов.
-Если зафлоачены все три то ширина зафлоаченной обертки будет равна ширине трем вложенным дивам, ширина которых итак равно ширине контента, потому что они зафлоаченны.
-Если все вложенные зафлоаченны, то во избежании схлопывания обертки, ее или тоже флоатим – тогда ширина сворачивается по ширине контента, или overflow:hidden; – тогда ширина не сворачивается.
-Обертка overflow:hidden;, 3 вложенных дива, первые два зафлоаченны а последний нет. Ширина первого 30%, второго 40%. Третий – ставим ширину 30%(можно любую другую) и он переходит на след. строку и начинается строго слева, если зафлоачиваем его, то как и положено встает справа от второго.
-Если задаем ширину в % то не задаем padding вложенным дивам, потому что сыпеться дизайн, т.е. правило 30%+40%+30% уже не соблюдается. Вместо этого задаем margin у встроенного в этот див, будь то параграф. список или другой контент.
Высота не задается в %, ни для простых ни для зафлоаченных.

5. “Зафлоаченные” элементы изымаются из родительского блока, и “папа” “схлоповается”.

Чтобы этого не происходило, я использую следующий стиль :
<ul>
<li>Туда</li>
<li>Здесь</li>
<li>Сюда</li>
</ul>
ul{
overflow:hidden; /*Лекарство*/
_height:1%; /*оно же для IE*/
border:solid 1px red;
list-style:none;
padding:5px;
}

ul li{
float:left;
border:solid 1px blue;
padding:5px;
margin:0 5px;
}

6. Чтобы расположить два слоя рядом друг с другом по горизонтали, воспользуемся стилевым параметром float со значением left. Этот элемент говорит, что слой необходимо выровнять по левому краю и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа. Теоретически, параметр float достаточно задавать лишь для одного слоя из двух. Однако браузер Internet Explorer в этом случае между слоями добавляет небольшой промежуток, что не всегда желательно, а Firefox накладывает слои друг на друга. Чтобы все смотрелось именно так, как хочется, float следует указывать для всех слоев.
#leftcol { /* Левая колонка*/
width: 200px; /* Ширина слоя */
float: left; /* Состыковка с соседним слоем */
}

#rightcol { /* Правая колонка*/
width: 550px; /* Ширина слоя */
float: left; /* Состыковка с соседним слоем */
}
<div id=»leftcol»>…</div>
<div id=»rightcol»>…</div>
Высота слоев определяется их содержимым, поэтому подход, показанный в данном примере, создаст две прямоугольные области разной высоты и цвета.

Главной особенностью приведенного подхода является тот момент, что при уменьшении окна браузера до 750 пикселов и меньше, слои располагаются по вертикали друг под другом. Иными словами, макет рассыпается на отдельные блоки. Чтобы подобная ситуация не происходила, следует воспользоваться параметром margin:
Опять воспользуемся параметром float, чтобы расположить колонки рядом, но добавим его только для первого слоя. При этом в стиле второго слоя следует установить параметр margin-left, значение которого равно ширине левой колонки. Но здесь есть одна хитрость, ширину правой колонки задавать нельзя, потому что это приведет к переносу блоков в браузере Internet Explorer при уменьшении окна браузера. А именно этого мы стараемся избежать. Поэтому общую ширину макета установим с помощью еще одного слоя, назовем его container, а остальные слои будут располагаться внутри него (пример 2). В этом случае ширину правой колонки можно не задавать, поскольку она будет занимать все доступное пространство.
#container {
width: 750px; /* Общая ширина колонок */
}
#leftcol { /* Левая колонка*/
width: 200px; /* Ширина слоя */
float: left; /* Состыковка с соседним слоем */
}
#rightcol { /* Правая колонка*/
margin-left: 200px; /* Отступ слева */
}
p {
margin: 0; /* Убираем отступы */
}
<div id=»container»>
<div id=»leftcol»><p>…</p></div>
<div id=»rightcol»><p>…</p></div>
</div>
При таком способе верстки при уменьшении ширины окна браузера слои остаются на своих исходных местах, но появляется горизонтальная полоса прокрутки. Также наблюдаются небольшие различия в браузерах, связанные с полями и отступами вокруг текста, расположенного внутри колонок. Но эти отличия не существенны и легко корректируются за счет применения параметров padding и margin.
Если внизу после колонок предполагается разместить еще один слой, то для него следует использовать стилевой параметр clear. Дело в том, что браузеры по-разному располагают этот нижележащий слой, поэтому следует отменить действие обтекания, что clear как раз и делает
<div style=»clear: left»>…</div> Значение этого параметра обычно совпадает со значением float.