Div Pop Down Problem

[NotTwoBright]

I have a three column layout with a header, left_nav, content, right_nav, and footer. May layout works as follows:

#header
{
border: none;
width: 100%;
}

#left_nav
{

float: left;
width: 20%;
margin: 0px;
padding: 0px;
border: none;

}
#rightnav
{
float: left;
width: 20%;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: none;
}
#content
{
float: left;
width: 59%;
padding: 0 0 0 10;
margin: 0;

}
#footer
{
clear: left;
width: 100%;
}

In IE when I shrink the size of my window horizontally the center content div will pop down below the left_nav and then as I continue to shrink the right_nav will pop down below the content.

I mozilla when I shrink the windows horizontally they begin to overlap each other, ie the content will begin to overlap the right_nav.

Does anybody have a solution to this problem?

[le_gber]

NotTwoBright

I think that your problem lies here: -

#content
{
float: left;
width: 59%;
padding: 0 0 0 10;
margin: 0;

}

Try using padding:0 and see if it floats properly if it does, then try using percentages for the padding or have a look at this exellent post from SuziUK: [webmasterworld.com...]

Hope this helps

Leo