Fluid floated element next to fixed-width floated element - css

Question

Here's my simple markup:
<div class="row">
<div class="col fixed">Short text</div>
<div class="col fluid">Longer text....</div>
</div>
And here's my CSS:
.row {
padding: 20px;
}
.row:after {
content: "";
display: block;
clear: both;
}
.col {
float: left;
}
.col.fixed {
width: 200px;
}
I thought the fluid text would appear next to the fixed column (to its right), and would then wrap down. This is not what actually happens. Instead, the whole .col.fluid drops under the other column, as if there were no floats.
The demo is here.
Why doesn't this work (isn't this how floats are supposed to work)? And what can I do to fix this?

Answer 1

One way to do this is by using this CSS:
.row {
background: rgba(0, 128, 0, .2);
padding: 20px;
display:table;
}
.col {
display:table-cell;
}
.col.fixed {
width: 200px;
}
jsFiddle example

Answer 2

To get the effect that you want, you need to place the floated-fixed box inside the fluid, block-level div.
See the following: http://jsfiddle.net/audetwebdesign/7cMQg/6/
<div class="row">
<div class="col fluid">
<div class="col fixed">Short text: to see the full effect,
type in a bit more text so that you can get a few lines
in the floated-fixed-width box.</div>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry...
</div>
</div>
If you check the CSS, I added a right margin to the floated div and changed the background color to highlight the positioning.

Answer 3

If you'd like an effect similar to the first letter being larger than the rest of the text (found in many books & writings), try this:
<div>
<span class="fixed">Short text</span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
CSS
.fixed {
width: 200px;
display:inline-block;
}
jsFiddle