[thelist] nested relative/floated divs

Marc Seyon seyon at delime.com
Sun Mar 17 21:26:01 CST 2002


Greetings all,

I have two divs placed side by side using this rule:

div.navobj
{
    position: relative;
    float: left;
    width: 47%;
    margin: 0 5px 0 5px;
    padding: 5px;
    border: 2px dotted blue;
}

This works fine... until I place them into the containing div:
#mainbody
{
    position: relative;
    float: left;
    width: 75%;
    margin: 0 5px 0 5px;
    padding: 5px;
    border: 1px silid black;
}

The code looks like
<div id="mainbody">
<div class="navobj">blah blah blah</div>
<div class="navobj">blah blah blah</div>
<div class="navobj">blah blah blah</div>
<div class="navobj">blah blah blah</div>
</div>

See it in action - http://www.delime.com/testing/screwydivs.html

Moz .92 and Netscape 6 mangle this so that the 'mainbody' div does not
properly enclose the 'navobj' divs. I'm guessing it's because both divs are
positioned using relative and float, but not sure of possible solutions...
not an experienced CSS Positioner yet...

It does work correctly in IE5.x and Opera 5 & 6. Not sure about IE 6.

Any suggestions? It's pretty early in the design, so I am open to anything
that will solve this problem. Also supporting NN4x is not a consideration.

Thanks.

-marc



More information about the thelist mailing list