No difference between floating and non-expanded divs

Question

I found that when I mix floating and unblocked divs, the field of the expanded div is missing.

HTML

<div class="d0 d1"> Left </div> <div class="d0 d2"> Right </div> <div class="d0 d3"> Center </div> 

CSS

 .d0 { height: 100px; border: 1px solid #333; } .d1 { float: left; width: 100px; } .d2 { float: right; width: 100px; } .d3 { overflow: hidden; width: auto; margin: 5px; } 

See this fiddle (no 5px field on center div)

http://jsfiddle.net/ozrentk/f5VFc/2/

However, if I add margin to floating elements, then this is indeed so. Does anyone know why this is happening?

EDIT I updated the fiddle, it was a bit confusing. To understand the problem, look at the margin, which should be the BETWEEN Center and Left div. Or Center and Law. Not.

Answer 1

The problem you are facing is that an element that does not contain a float will ignore the moved elements in the document stream. Margin is applied, but since the non-floated div does not recognize the floated div, it refers to the edge of the page, and not to the floating div. You can read more about this here: http://spyrestudios.com/css-in-depth-floats-positions/