Question

I have an element whose width is not known in advance, which I want to float to the left, but only if it leaves at least x amount of space on the right for some text. Tried something like this:

#image { float: left }
#text  { min-width: 30em; }

<img id="image" src="...>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

But this does not work because the width of #text is considered to include the float.

How can I make the float conditional on the amount of space left to its right?

Answer 1

Answered here: http://css-tricks.com/minimum-paragraph-widths/.

Basic idea is to add a p::before { width: 10em; } rule.