How does this float div get an upper limit when a div wrapper has no border?

Question

Please note that I am not asking about fixing the problem, but instead want to know how the floated div gets the margin when the wrapper div has a 0px border. But when the wrapper div has a 1px border, then the floated div does not get the field, but in both cases the secondDiv gets the upper limit as intended.

Please note that I understand the theme with blurring, but what should it do with setting the border?

<div id="container"> <div id="firstDiv">FIRST Div inside CONTAINER</div> <div id="secondDiv">SECOND Div inside CONTAINER</div> </div> body{ width: 780px; margin: 00px auto; } #container { border: 1px solid orange; /* but when its set to 0px then floated div gets margin too*/ } #firstDiv{ float:left; } #secondDiv{ margin: 14px; } 

http://jsfiddle.net/dmpxw/

Now, if the border of the wrapper div is set to 0px, then floated also moves down. But I think he should not stay there, as in the previous case?

http://jsfiddle.net/dmpxw/1/

Answer 1

This is an interesting option.

When the container has a border, the margin of the second inner div starts from the border - that is, the margin is applied from the front to the front. This is because the border is the last element that is applied before measuring the margin.

When the container has no border, the edge of the second inner div runs through the last element, which is now the body. Thus, the margin is now outside the container, so the container is now actually further than the page - the first inner div does not matter and is located directly at the top of the container - this is the container itself, which moved to the second case.

If you add a background color to your example, you will see that when you have a border, the field is inside the container, and when you have no border, the margin is outside the container. See an example on JSFiddle .