Search code examples
cssinternet-explorer-7css-floatinternet-explorer-6

css float issue in ie6&ie7

I have a float issue in IE6&ie7:

  <!DOCTYPE html>
    <html>
    <head>
    <title>lily</title>
    <style>
        div{width: 100px; height: 100px;}
        .div1{background: red; float: left;}
        .div2{background: yellow;}
    </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
    </body>
</html>

why it displays different in IE6&&IE7 and Chrome? And how to solve it in ie6&ie7?

:

Solution

  • Your second div is clearing your first, but only the text. If you set a left margin you can tell it to sit next to the floated div.

    http://jsfiddle.net/Pjvtb/

    .div2 {
    margin-left: 100px; /* new line */
    background: yellow;
}

    Note: IE 6 and 7 incorrectly move the second div past the first one, due to hasLayout. You can search online for more information about the problems associated with it. There is also a 3px "text jog" present in IE 6 (possibly 7 too, I can't remember) which usually meant, to display the same in all browsers, one would actually make the margin-left: 103px to accommodate IE's weirdness.