To prevent the right column from floating, simply apply a generous margin to accommodate the left column. When both columns are floated, the red #box element may end up with no height and become invisible. By not floating the right column, it will dictate the height of #box. However, if #right_column is not floated at all, it will automatically expand to fill the available width in #box.
Consider the following structure:
<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>
Applicable 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;
}
See the updated fiddle for reference: http://jsfiddle.net/ambiguous/eDTdQ/
Alternatively, you can specify a width of 200px for #right_column, maintain the float, and add overflow: hidden to #box to ensure it expands to contain its floated children:
#box {
background-color: red;
overflow: hidden;
}
#right_column{
background-color: green;
float: left;
width: 200px;
}
Live demonstration of this approach: http://jsfiddle.net/ambiguous/eDTdQ/2/
For a situation where the right column should stretch automatically and both columns need to be full-height, you can opt for absolute positioning of the left column instead of floating it:
#box {
background-color: red;
position: relative;
}
#left_column {
width: 200px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
Live demonstration: http://jsfiddle.net/ambiguous/3Cxe3/