floated div jumping below

John_Mc

Hi,

I have a container div:

div.Wrapper
{
  text-align:left;
  margin-left:40px;
  margin-top:5px;
  min-width:1000px;
  background-color:Transparent; 
  padding:0px;
}

It contains two floated divs:

div.NavMenuCol
{
	width:200px;
	float:left;
}

div.Wrapper .MainContents
{
  float:left;
  margin-left:5px;
  min-width:790px;
  min-height:500px;
  vertical-align:top;
  padding:0px;
}

The main content area is variable in width. Most of the time it will be 790px and it looks great, but sometimes it could stretch to 1000px+.

My problem is that when this happens, the main content div jumps below NavMenuCol.

Any suggestions on how to prevent this would be great.

Thanks
John

Goodshape

You could try position : relative or position : absolute on the MainContents to set it 200px from the left, regardless of what the menu is doing.

Though that may well cause other problems.

louie

jumping below is usually due to margin settings.

To solve this, ad another div inside the ".MainContents" with "margin:0px; padding:0px;", change the "min-width" to " fixed "width" and right below the two floating divs ad

<div style="clear:both;"></div>

John_Mc

Goodshape wrote: »

You could try position : relative or position : absolute on the MainContents to set it 200px from the left, regardless of what the menu is doing.

Though that may well cause other problems.

Worked a treat, and without any problems (that I've noticed so far anyway)!

Thanks to both of you for your help

Scotty #

Why are you floating the .Maincontents div? If there are only the two divs inside the container it seems pointless (and it wont wrap under the nav div if you don't float it)