HTML, CSS, javascript, PHP

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

Информация о материале
Категория: HTML, CSS, javascript, PHP

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

По поиску такое находится и делается это так - для левой колонки задается ширина, например, 200px и float: left

width:200px;
float:left;

а для второй задается левое поле равное ширине левой колонки, в данном случае, 200px

margin-left:200px;

Так это работает, пока в тянущейся колонке не будет применено очистка потока:

clear:both;

тогда вторая колонка соскакивает под первую.

Чтобы такого не происходило можно добавить блок во вторую колонку и задать для него такие стили:

float:left;
width:100%;
Пример целиком:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Две колонки, одна фиксированной ширины, другая тянется</title>
<style type="text/css">
body {
font: 11pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
margin: 0; /* Отступы на странице */
}
h1 {
font-size: 36px; /* Размер шрифта */
margin: 0; /* Убираем отступы */
color: #fc6; /* Цвет текста */
}
h2 {
margin-top: 0; /* Убираем отступ сверху */
clear:both;
}
#header { /* Верхний блок */
background: #0080c0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
#sidebar { /* Левая колонка */
float: left; /* Обтекание справа */
background:#ccc;
width: 200px; /* Ширина колонки */
}
#contentcol { /* Правая колонка */
margin: 0px 0px 0px 200px; /* Значения отступов */
background:#eee;
}
#content { /* Правая колонка */
float:left;
width:100%;
}
#footer { /* Нижний блок */
background: #333; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
clear: left; /* Отменяем действие float */
}
.clr{
clear:both;
}
</style>
</head>
<body>
<div id="header"><h1>Заголовок h1</h1></div>
<div id="sidebar">
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
</ul>
</div>
<div id="contentcol"><div id="content">
<h2>Заголовок h2</h2>
<p>Параграф 1.</p>
<p>Параграф 2.</p>

</div>
<div class="clr"></div>
</div>
<div id="footer">&copy; Копирайт</div>
</body>
</html>

 чтобы блок contentcol не схлопывался добавляем:

<div class="clr"></div>