ansaurus

Question

top margin on html element after floated element is ignored

Answer 1

+2 A:

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>

T. Stone 2009-12-10 19:39:53

Thank you for the fast and accurate response.

mikez302 2009-12-10 20:09:46

Answer 2

+1 A:

set "float:left" on the second div

Henrik Adolfsson 2009-12-10 19:40:45

Answer 3

+1 A:

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

zerolab 2009-12-10 19:45:22

Answer 4

+1 A:

The problem is that the second div can only calculate a margin from a non floating element. You need to add any non floating element before you attempt to set the margin. A non breaking space or a line break outside the floated div and before the second div will work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>CSS test</title>
</head>
<body>
   &nbsp;
   <div style="float: left; border: solid red 1px; height:40px;">foo</div>
   <div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>

OrionRobillard 2009-12-10 19:48:44

ansaurus

tags:

views:

answers:

top margin on html element after floated element is ignored

related questions