An IE float bug or am I doing it wrong?

Discussion in 'CSS' started by martal, Jan 21, 2007.

0
  1. #1
    Hello people, my first post!

    I've been using CSS for a while but now have to go strict and compliant. Which brings me up against IE, of course.

    These divs have no padding or borders. So my understanding is that they should work in IE 5.5 and 6 as well as in Firefox or Opera. But no. IE does not get the margins and is pushing the sidebar down.

    Where am I going wrong? Is it a bug? How can I restructure?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
    body {
    border: 0;
    margin: 0;
    padding: 0;
    background: #845732;
    min-width: 750px;
    text-align: center;
    }
    #wrap {
    background: #FFDD00;
    border: 0;
    margin: 0 auto;
    padding: 0;
    width: 750px;
    text-align: left;
    }
    #main {
    background: #FFBF0F;
    float: left;
    width: 485px;
    border: 0;
    margin: 10px 5px 0 10px;
    padding: 0;
    }
    #sidebar {
    background: #FFC342;
    float: right;
    width: 235px;
    border: 0;
    margin: 10px 10px 0 5px;
    padding: 0;
    }
    #footer {
    background: #FFE3A7;
    clear: both;
    border: 0;
    margin: 0;
    padding: 0;
    }
    </style>
    </head>

    <body>
    <div id="wrap">
    <div id="main">
    <h1>Main</h1>
    </div>
    <div id="sidebar">
    <h2>Sidebar</h2>
    </div>
    <div id="footer">
    <h3>Footer</h3>
    </div>
    </div>
    </body>
    </html>
     
    martal, Jan 21, 2007 IP
  2. martal

    martal Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    OK, the nitty-gritty.

    #wrap {
    margin: 0 auto;
    width: 750px;
    text-align: left;
    }

    #main {
    float: left;
    width: 485px;
    margin: 10px 5px 0 10px;
    /* top 10, right 5, bottom 0, left 10 */
    }

    #sidebar {
    float: right;
    width: 235px;
    margin: 10px 10px 0 5px;
    /* top 10, right 10, bottom 0, left 5 */
    }

    Which gives the middle spacer 'column' main right 5 + sidebar left 5=10

    My arithmetic adds up, right? Why the problem with IE?
     
    martal, Jan 21, 2007 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    kk5st, Jan 21, 2007 IP
  4. martal

    martal Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks Gary, that addresses the problem.

    Good resource too.
     
    martal, Jan 23, 2007 IP