How to make floating text wrap over multiple lines instead of breaking the float?

Question

I must have been awake too long.. cos I find myself stuck on a simple CSS problem. I'm building a site in Twitter Bootstrap, and I'm trying to get a title to float next to a thumbnail, but the title doesn't want to wrap across two lines, it prefers to break the float and snap to below the thumbnail div. This jsFiddle demonstrates the problem.. can someone please put me out of my misery?

Accepted Answer

WHY THIS HAPPENS

Your first thumbnail has the class `.pull_left` for which you set `float:left`. Therefore, both your thumbnail and caption are floated. Since the caption is short, its width is small enough to go to the left of the thumbnail.

Your second thumbnail doesn't have the class `.pull_left` and is not floated. But your second caption is, and its natural behaviour is to go to the left, below any elements that are before it in the HTML (including the second caption).

SOLUTIONS

Float the thumbnail and add a width of `270px` (=`350px`-`80px`) to the `.caption`.

Demo

Or float just the thumbnail and don't float `.pull_left` and then you don't need to add `width: 270px` either. Optionally you could add a `margin-left: 80px` to `.caption` in order to prevent really long text from wrapping under the thumbnail. Or even slightly bigger than `80px` to have a little space between the thumbnail and the caption.

Demo // Demo with margin

How to make floating text wrap over multiple lines instead of breaking the float?

Solution

Problem