CODEWITHSUNDEEP
css
Despertar
Despertar

Reputation: 22362

Non-floated div pushes floated div down a line

With this CSS

#left { background: red; float: left; width: 100px; height: 100px;}
#right { background: green; float: right; width: 100px; height: 100px;}
#center { background: blue; height: 100px; margin-left: 110px; margin-right: 110px; }

and this html

<div id='left'></div>
<div id='right'></div>
<div id='center'></div>

It creates a fixed column, variable column, then another fixed column.

When the order is left, right, center it works just as expected http://jsfiddle.net/6X4fN/5/.

However, when putting left, center, right, the right div is pushed onto the next line http://jsfiddle.net/6X4fN/6/.

I am looking for an explanation as to why this happens. The way I am understanding it, the two floated divs are removed from the document flow then the center div is scrunched with the margins. Given this, I don't see why the order of the divs would affect this layout. Since the right div is floated, the center div should not push it to the next line.

Upvotes: 0

Views: 170

Answers (1)

Michael Peterson
Michael Peterson

Reputation: 1123

Floated divs must appear in the flow before items that are to flow around them.

"The elements after the floating element will flow around it." http://www.w3schools.com/css/css_float.asp

Upvotes: 2

Related Questions