We help IT Professionals succeed at work.

CSS margin problems on IE6 with floating DIV

7,466 Views
Last Modified: 2013-12-08
It's amazing how things so simple can turn into a problem when there is this little thing you overlooked... please help!

I have this simple file (see code below) and it works fine on IE7, FF2, OP9.22 and Safari 3. BUT in IE6 the two margins of the floating PageCont and barCont turns out to be 20px instead of the specified 10px?? Why? And how do I overcome this and get my 10px margin.

Funny thing is that if I do not float the two divs the margin readers as the 10px even on IE6 but as soon as I float it - voila 20px on IE6. Beats me...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
  <style>
  #mainContainerOuter{
    width: 948px;
    background-color: red;
    margin: 0;
    padding: 0;
  }
 
  #mainContainer{
    width: 938px;
    background-color: green;
    margin: 0;
    padding: 0;
  }

  #intro {
    margin: 0 45px 0 45px;
    background-color: #ffffff;
  }

  #pageCont {
    clear: both;
    float: left;
    width: 550px;
    padding: 0;
    margin: 0 0 0 10px;
    background-color: blue;
  }
 
  #barCont {
    float: right;
    width: 268px;
    padding: 0;
    margin: 0 10px 0 0;
    background-color: yellow;
  }
  </style>
</head>

<body>

  <div id="mainContainerOuter">
  <div id="mainContainer">

    <div id="intro">
      <div id="header_nosub">
        <h1>Headline</h1>
      </div>
    </div>
     
    <div id="pageCont">
      &nbsp;
    </div>

    <div id="barCont">
      &nbsp;
    </div>
    <div style="clear: both;"></div>

    <div id="footer"></div>
    <div style="clear: both;"></div>

  </div>
  </div>


</body>
</html>
Comment
Watch Question

Web Developer
CERTIFIED EXPERT
Top Expert 2006
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
so simple...
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.