Макет с фиксированными и жидкими колоннами и чистыми поплавками ⇐ Html

[Anonymous]

Мне нужно создать макет с двумя столбцами с: < /p>


[*] Перекрываемое левое столбец и правая столбца Fluid; < /li>
Каждый столбец имеет окно с головой (с вкладками и меню) и корпус. Пространство между головным div (вкладки) и телом div (тело окна 2) :



i Создано. http://jsfiddle.net/4sk3bkde/

Проблема, кажется, возникает, когда я использую класс .clear для очистки поплавков:

.clear:after {
content: "";
display: table;
clear: both;
}
< /code>

html -код: < /strong> < /p>

• Tab 1
• Tab 2

Menu

Body of window 1

• Tab 1
• Tab 2

Menu

Body of window 2






< /code>

и код CSS: < /strong> < /p>

.clear:after {
content: "";
display: table;
clear: both;
}

.fluid,
.fixed {
border: 1px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.fixed {
float: left;
width: 250px;
}

.fluid {
margin-left: 250px;
}

div.window {
}

div.head {
border: 1px solid red;
}

ul.tabs {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}

ul.tabs li {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}

a {
display: inline-block;
float: right;
}
< /code>

Почему я получаю эту проблему при использовании чистого? Как это решить?

Подробнее здесь: https://stackoverflow.com/questions/335 ... ear-floats