Menu
I have a page with 2 divs. The first one is floated. The 2nd one has a "clear: both" CSS declaration and a big top margin. However, when I view the page in Firefox or IE8, I don't see the top margin. It looks like the 2nd div is touching the first div, instead of being separated. Is there any way to make the top margin work properly?
I have read the CSS spec and noticed that it says "Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.". However, I don't know what to do about that.
Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS test</title> </head> <body> <div style="float: left; border: solid red 1px">foo</div> <div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div> </body> </html>
576
This issue is known as Margin Collapse and happens sometimes between top and bottom margins on block elements. That's why the margin doesn't work on the p tag. To make it work here an option is to use padding-top on the p tag. And on the a tag the margin doesn't work because it's an inline element.
Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
You've correctly identified the problem. The floated <div> is no longer used to calculate the top margin, and therefor the 2 <div>'s just butt against each other. A simple way to solve this is just to wrap the 2nd <div>. This will allow the wrapper to (invisibly) butt up against the first <div>, and allow you to specify white space for it.
The trick to getting the wrapper to work right is to have the white space be internal white space. In other words, the wrapper uses padding instead of margin. This means whatever is going on outside the wrapper (like other floating elements) won't really matter.
<div style="float: left; border: solid red 1px">foo</div> <div class="wrapper" style="clear: both; padding-top: 90px;"> <div style="border: solid red 1px">This div should not touch the other div.</div> </div>you could simply add a div between them
<div style="float: left; border: solid red 1px">foo</div> <div style="clear:both;"></div> <div style="margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div> and that should take care of it.
Lots of WordPress themes (and not only) employ this technique
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
