Question

I thought that text will flow around a floated element if the text follows that element in the markup. Why then does the following example produce the shown result?

Here is the HTML:

<div class="float block red">Red</div>
TEXT BETWEEN RED AND BLUE
<div class="float block blue">Blue</div>
<div class="float block green">Green</div>

And the CSS:

.float{
    float: left;
}
.block{
    width: 50px;
    height: 50px;
}
.red{ background-color: red;  }
.blue{ background-color: blue; }
.green{ background-color: green; }

And this is the result:

Why isn’t the order on screen: Red, TEXT BETWEEN RED AND BLUE, Blue, Green?

Thanks

Answer 1

“A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. […] When a box is taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it.”

Source

It’s because you’re floating the elements left. You’re essentially saying that those elements will be as far left on the page as they can be, relative to other floated elements. Your text is not floated, and is thus relative to the right-most, left-floated element. Does that make sense?

To achieve your desired result, just put the text in a DIV, SPAN, etc. and float it left also.