Question

• parent div = red dashed border
• child-3 el = green solid border

code here

The parent div (#main-container) contains, a headline, two floated divs and a text link at the bottom. The text link at the bottom should stand alone, but it seems to effect the two floated divs (.child-1, .child-2) instead of the parent div. Can someone please explain to me why the last child element (.child-3) in this layout effects the contents of its two floated sibling divs? What is missing and why is it needed? Thanks

Answer 1

Without really looking into the issue and knowing what you want, placing clear:both on the .child-3 seemed to work.

Why? http://www.quirksmode.org/css/clearing.html