настройка css с двумя столбцами, плавающая над контейнером

Question

У меня есть очень простая установка двух столбцов, показанная ниже.

Однако в примере, где у меня есть две колонки, div #left и #right будут плавать над контейнером #posts.

Пример 2 не плавает, как это, но это не установка двух столбцов, которую я ищу. Предложения?

div#posts 
{
   width: 700px;  
   margin: 0 auto;  
   margin-top: 5px;
   margin-bottom: 0px;  
   padding: 5px;  
   border: 1px solid #CCC;  
   background-color: #EEE;  
} 

div#left {
   float:left;
   width:100px;
   background:#EEE;
}

div#right {
   float:right;
   width:500px;
   background:#EEE;
}


<!-- example 1 

<div id="posts">
    <div id="left">post</div>
    <div id="right">post</div>
</div>

<!-- example 2

<div id="posts">
    <div>post</div>
    <div>post</div>
</div>

Answer 1

Просто добавьте overflow: auto; к вашему правилу div#posts.

Установка свойства overflow на auto имеет побочный эффект от того, что этот элемент содержит плавающие элементы во всех современных браузерах. Единственное время (о котором я знаю), что это может вызвать проблемы, - это если есть какое-то ограничение (доступное ограниченное пространство, явная ширина / высота с увеличенным содержимым и т. Д.), Которое делает автоматические полосы прокрутки нежелательными, но это не распространено , (На самом деле, автоматические полосы прокрутки обычно являются хорошей вещью в этих случаях.)

Answer 2

Overflow:auto было бы элегантным решением, если бы оно было совместимо с различными браузерами. Если я правильно помню, это вызовет некоторые проблемы в IE6 / 7.

Дополнительная информация о переполнении авто / скрыто http://www.wickham43.supanet.com/tutorial/scrollingdivs.html

Answer 3

[править: хорошо, забудьте об этом]

Правильный способ сделать это - добавить div в div Posts, но после столбцов с атрибутом clear: both;

Ex:

<div id="posts">
    <div id="left">post</div>
    <div id="right">post</div>
    <div style="clear: both;"></div>
</div>

Большинство людей для этой цели держат класс .clear (.clear {clear: both;}) под рукой. Это происходит довольно часто.