CSS: Why does the padding or border on a container change behavior of enclosed float?

What you are witnessing is "margin collapse" which occurs when two elements are on top of each other. The reason it goes away is you add the border or outline to one of the elements. From the W3C.

Up vote 2 down vote favorite share g+ share fb share tw.

Sample 1 & 4 display how I expect. Sample 2 & 3 do not. This is really driving me crazy!

It behaves strangely in both Webkit and FireFox. Have not tested IE. This float is correct Sample 1 Parent has nothing This float is incorrect Sample 2 Parent has padding This float is incorrect Sample 3 Parent has border This float is correct Sample 4 Parent has padding, H3 has no margin css firefox webkit float padding link|improve this question asked Oct 27 '11 at 17:41Paul Wieland655 100% accept rate.

I have just heard confirmation that it also does this in IE8. Why do all three rendering engines agree? – Paul Wieland Oct 27 '11 at 18:19.

What you are witnessing is "margin collapse" which occurs when two elements are on top of each other. The reason it goes away is you add the border or outline to one of the elements. From the W3C: In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

I think actually 2, 3 and 4 are rendered like they should be and 1 looks a bit weird. 1 the top margin of the header is ignored while it is clearly set. It is kind of weird since the p in the first example is respecting the margin of h3.

Adding overflow: hidden to the encapsulating div seems to sort it so it respects the margin of h3. 2 and 3 the margin of h3 is respected 4 you removed the margin trough style.

The top margin isn't ignored in Sample 1. The is pushed down from the top of the page as it should be by the margin amount. The only thing that moved is the floating div.

– Paul Wieland Oct 27 '11 at 18:12 No if you inspect the div around sample 1 in firefox or chrome you will see it doesn't wrap it like it should be doing, where it does wrap it properly in all other cases – Benjamin Udink ten Cate Oct 27 '11 at 18:14.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.