Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Clear: Both DIV misbehaving in IE7

Bottom of Page

1 to 6 of 6

  1.  
  1.  permalink
    Hello, I have a page structure which contains a left and right floated div side-by-side with a third div that spans them both below using the clear: both property.

    All three divs contain separate background images and were displaying correctly in FF3 and IE7.

    However, when I have attempted to nest two new divs inside the third div (the one with the clear: both property), this pushes the third div below the two new nested divs (as though the clear: both property is making the div clear ALL divs within the wrapper... even those nested within them).

    This problem is only occurring in IE7, the page displays as I would expect in FF3, Safari and Chrome.

    Can attempt to supply example code if the above doesn't make sense but am bound by a non-disclosure agreement!
    • CommentAuthorG.Cyrillus
    • CommentTimeMar 16th 2009
     permalink
    hello , (french) , not too sure i understand you .
    If the third element is clearing it should be underneath visually the first two floatting ...
    Can we have a piece of your html , doctype used and css rules applied that cans show your problem ? (or better a page online) .

    If only IE is involved , it could be the "haslayout" showing up ... or not :).

    GC
  3.  permalink
    Ok, this is the basic html for the section of my grid that is misbehaving:

    <div id="contenthomewrapper">
    <div id="left"></div><div id="right"></div><div id="bottom">
    <div id="bottom-leftbox"></div>
    <div id="bottom-rightbox"></div>
    </div>
    </div>

    and these are the css properties controlling those divs:

    #contenthomewrapper {
    margin-left: 10px;
    margin-right: 10px;
    }

    #left {
    width: 355px;
    height: 240px;
    float: left;
    overflow: hidden;
    }

    #right {
    width: 355px;
    height: 240px;
    float: right;
    }

    #bottom {
    width: 720px;
    height: 240px;
    clear: both;
    }

    #bottom-leftbox {
    width: 320px;
    height: 150px;
    margin-left: 30px;
    margin-top: 65px;
    color: white;
    float: left;
    }

    #bottom-rightbox {
    width: 320px;
    height: 150px;
    margin-right: 30px;
    margin-top: 65px;
    color: white;
    float: right;
    }

    I hope this is of some help (have had to strip out the content). I just want the 'bottom' div to clear the 'left' and 'right' divs but not the 'leftbox' and 'rightbox' divs that are nested within it. This is what is happening in all browsers except IE7.

    :(
    • CommentAuthorG.Cyrillus
    • CommentTimeMar 16th 2009 edited
     permalink
    thanks,

    i tried to figure out what is your problem and copied/pasted your html into a document html4.01 strict . adding backgrounds colors to see your divss :)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>HTML 4.01 strict</title>
    <style type='text/css'>
    #contenthomewrapper {
    margin-left: 10px;
    margin-right: 10px;
    background:yellow;
    }

    #left {
    width: 355px;
    height: 240px;
    float: left;
    overflow: hidden;
    background:gray;
    }

    #right {
    width: 355px;
    height: 240px;
    float: right;
    background:purple;
    }

    #bottom {
    width: 720px;
    height: 240px;
    clear: both;
    background:red;
    }

    #bottom-leftbox {
    width: 320px;
    height: 150px;
    margin-left: 30px;
    margin-top: 65px;
    color: white;
    float: left;
    background:green;
    display:inline;
    }

    #bottom-rightbox {
    width: 320px;
    height: 150px;
    margin-right: 30px;
    margin-top: 65px;
    color: white;
    float: right;
    background:pink;
    display:inline;
    }
    </style>
    </head>
    <body>
    <div id="contenthomewrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom">
    <div id="bottom-leftbox"></div>
    <div id="bottom-rightbox"></div>
    </div>
    </div>
    </body>
    </html>


    The only things that might be disturbing is the double margin bug on floatting elements , wich is killed using : display:inline; within the css rules .

    Loading this code in IE7 /6 , FF2/3 & opera /safari / chrome the behavior with the bottom div is very similar .

    We are missing something maybe there :)
  5.  permalink
    I'm not exactly sure what the end result should look like, but you could try switching the left and the right divs with each other:

    <div id="contenthomewrapper">
    <div id="right"></div>
    <div id="left"></div>
    <div id="bottom">
    <div id="bottom-rightbox"></div>
    <div id="bottom-leftbox"></div>
    </div>
    </div>
  6.  permalink
    Thanks for the suggestions guys, have determined that it was some image rollover code that was pushing the div out of place, would have preferred to keep it in there but have taken it out for now so I can get on with things!

1 to 6 of 6

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page