Исправление родительского родительского элемента CSS

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

Итак, я плаваю боковую панель слева и даю контент справа от поля. Все хорошо и хорошо...

До тех пор, пока дочерний элемент содержимого не будет применен к нему, он скачет ниже боковой панели.

Есть ли способ сделать дочерний элемент только float и очистить внутри него родительский контейнер?

Как изображение стоит 1000 слов, здесь JSFiddle:

http://jsfiddle.net/qRYYm/1/

Ответы

Ответ 1

Если вы добавите overflow:auto; в .content, который должен видеть вас правильно.

Ответ 2

Как насчет этого:

aside{
    position: absolute;
    height: 300px;
    width: 100px;
}

http://jsfiddle.net/qRYYm/2/

Ответ 3

Вам следует избегать использования clear. Вы можете использовать переполнение: скрытый с основным контейнером

<div class="content">
    <div class="one">One</div>
    <div class="two">Two</div>    
</div>

.content { float: left; overflow: hidden; width: 900px; }
aside { float: left; width: 100px; }

Кроме того, вы не должны использовать margin-left: 100px, чтобы вывести контент из столбца слева. Поплавайте и влево. Я нахожу, что столбцы любят быть в главной обертке. Это более уютно.

Ответ 4

Вы также можете сделать это.

.left{float:left;}
.right {float:right;}
.clear{clear:both;}

<div>
    <div class="left">SideBar</div>
    <div class="right">
             <div>
                 <div class="left">content 1</div>
                 <div class="left">content 2</div>
                 <div class="clear"></div>
             </div>
   </div>
    <div class="clear"></div>
</div>

При применении float в любом div (s) поместите их в родительский div и очистите внутри одного родительского div