CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Chris
Chris

Reputation: 726

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

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?

Upvotes: 3

Views: 6458

Answers (2)

Ana
Ana

Reputation: 37179

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

Upvotes: 6

Jayx
Jayx

Reputation: 3966

You should float your thumbnails and not the caption ... the caption content will wrap around your image ... if you wish to create a stand-off, add margin to your caption.

Example here.

Upvotes: 1

Related Questions