Home/ Questions/Q 489289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T01:47:36+00:00

I have a page with 2 divs. The first one is floated. The 2nd

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0