Не перемещайте правую колонку вообще, просто дайте ей достаточно большое поле для размещения левой колонки.Плавающие элементы удаляются из обычного потока документов и ничего не влияют на высоту их родителя;так что, если вы перемещаете правую и левую колонки, ваш красный #box элемент заканчивается без высоты, и вы его не видите;если вы перестанете перемещать правую колонку, то она действительно определит высоту #box.Если вы вообще не плаваете #right_column, он расширится, чтобы использовать всю доступную ширину в #box.
Примерно так:
<div id="container">
<div id="box">
<div id="left_column">
<p>details stuff yada yada yada</p>
</div>
<div id="right_column">
<p>other stuff yada yada yada test test test test test stuff stuff content content content content content stuff stuff example stuff test stuff content content stuff content example</p>
</div>
</div>
</div>
CSS:
#container {
width: 400px;
}
#box {
background-color: red;
}
#left_column {
width: 200px;
background-color: blue;
float: left;
}
#right_column{
margin: 0 0 0 200px;
background-color: green;
}
Обновленная скрипта: http://jsfiddle.net/ambiguous/eDTdQ/
Кроме того, вы можете добавить width: 200px к #right_column и позволить ему продолжать плавать, а затем добавить overflow: hidden к #box, чтобы #box расширяется и содержит плавающие дочерние элементы:
#box {
background-color: red;
overflow: hidden;
}
#right_column{
background-color: green;
float: left;
width: 200px;
}
Живая версия этого подхода: http://jsfiddle.net/ambiguous/eDTdQ/2/
Если вы хотите, чтобы правый столбец автоматически растягивался, и чтобы оба столбца быливо всю высоту, тогда вы можете абсолютно позиционировать левый столбец вместо того, чтобы плавать в нем:
#box {
background-color: red;
position: relative;
}
#left_column {
width: 200px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
Live: http://jsfiddle.net/ambiguous/3Cxe3/