Weird float problem

HTML & CSS
1

Hello :cool:

I have this:

With this CSS code:

.menu {
float:right;
text-align:right;
margin-right:117px;
display:inline;
width:100px;
}

.webdesign{
margin:20px 0 150px 22px;
padding-top:50px;
}

.maincontainer{
width:953px;
margin:auto;
}

and:

<div class="maincontainer">
      <div class="menu">
        <ul>
          <li><a onclick="$.scrollTo( '#aboutscroll', 800);">&Agrave; Propos</a></li>
          <li><a onclick="$.scrollTo( '#contactscroll', 800);">Contact</a></li>
          <li><a href="portfolio.php">Portfolio</a></li>
        </ul>
      </div>

      <div class="webdesign">
        blablabla
      </div>
[...]

Firefox: fine.
IE8: fine.
IE6/7: the menu doesn’t care about the margin-top applied to .webdesign so it’s stuck to the image above. Even with a 200px value, it doesn’t move.

I’ve fixed the problem by applying a padding to the .maincontainer instead.

But I’d still like to know what caused this! :mad:

Thanks :slight_smile:

2

Hi oneday, Welcome to SitePoint! :slight_smile:

Actually the code you posted renders the same in IE6/7 as the other browsers you mentioned. I suspect we are missing some of your code.

The thing to consider here is that floats are removed from the page flow. Any top margin on an element after the float will be in relation to the static content that is above the float. If there is no content above the float, then the parent container will be the margin’s starting point.

It would be worth your while to read through this article.
Let’s Be Clear About This!

That brings up another subject, the clear property. Now, if you were to set clear:both; on your .webdesign div you would see things differently. IE6/7 would actually get it wrong at this point and apply that 20px top margin and good browsers would still let that top margin slide behind the float. The cleared div would actually be below the float in good browsers but the margin would not be visible.

It is always best to set any margin you need on the bottom of the float.

Here is how The Specs define clearance …

Computing the clearance of an element on which ‘clear’ is set is done by first determining the hypothetical position of the element’s top border edge within its parent block. This position is determined after the top margin of the element has been collapsed with previous adjacent margins (including the top margin of the parent block).
Here is the code you posted set up as a stand alone test case. Be aware also that “haslayout” was not set on the .wedesign div with your code so IE is treating it differently in that aspect also.

I commented out the clear:both and the haslayout properties. If you break them loose you will see things differently.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Margin Test</title>

<style type="text/css">
.maincontainer {
    width:953px;
    margin:auto;
    overflow:hidden;/*contain inner floats*/
    background:#DDD;
}
.menu {
    float:right;
    width:100px;
    height:100px;/*height added for demo only*/
    margin:0 117px 0 0;
    display:inline;/*IE6 margin bug*/
    background:red;
}
.webdesign {
    /*clear:both;*/
    margin:20px 0 150px 22px;
    padding-top:50px;
    background:lime;
    /*min-height:0;/*IE7 haslayout*/
}
/* html .webdesign {height:1&#37;;}/*IE6 haslayout*/
</style>

</head>
<body>

<div class="maincontainer">
    <div class="menu">
        <p>Menu Div</p>
    </div>
    <div class="webdesign">
        <p>Blah blah blah....</p>
    </div>
</div>

</body>
</html>
3

Hi, sorry for the code.
I’ve read your links but I’m not sure if it applies as I don’t want to clear my floats :slight_smile:
Actually you can see the problem here : http://www.aucuneidee.net/oldindex.html
margin-top on .webdesign moves the menu but not on IE6/7 :confused:

Thanks!

4

Hi onedayiwillrock, Thanks for the link. :slight_smile:

The cause of the differing space in old IE vs good browsers here is the collapsing margins that is not collapsing in IE when the parent has [URL=“http://reference.sitepoint.com/css/haslayout”]hasLayout.

You can avoid this also in good browsers by overflow, and then apply the margins where you need them.


.maincontainer{
width:953px;
margin:auto;[COLOR="Red"]
overflow:hidden;[/COLOR]
}

.menu {
float:right;
text-align:right;
margin-right:117px;
display:inline;
width:100px;
}

.webdesign{
padding-top:50px;[COLOR="Red"]
overflow:hidden;[/COLOR]
}
5

Thanks for the links :slight_smile:

I used the zoom:1 method and was able to pinpoint the offending div.

Thanks again :slight_smile: