Main column appears where sidebar column ends

Question

I'm braindead on this and I know it's simple.

There's a header div, appears fine. There's a left-sidebar div, appears fine with top snuggled up to header div.

Then there's a main content div. There is an image and h1 which appear like you would expect up against the header div, but then a large gap appears until the navigation (in a nested div). Navigation is correctly in the main content div, but top of this div always aligns with bottom of sidebar content.

I've tried mixtures of clear:left and both and floating and whatnot. If inside the html I move the sidebar div below the main content div then the main content has no gap but the sidebar has a big top gap and appears flush to the bottom of where the main content nav ends.

What am I missing here, thanks in advance!

Answer 1

Are you setting any widths (or padding, margin, border) which might make your problematic div too wide to fit?

Remember that if you are doing something like :

width: 100%;
border: 1px solid;

Then your element will take up 100% width + 2 pixels.

Answer 2

It sounds like you have your sidebar occuring first in the source order.

If you have the two divs (sidebar, main) floated in different directions, then look at the width avaiable they are sharing. Reduce the width of one div (you should have width set on your floats) until their combine width, including padding, margin, borders fits in available space. (I will only use width in my example for brevity).

When this effect happens, in my experience, the one occurring later in the source order is the one that gets prevent from sliding up into it's spot by too much width.

<div id="container">
<div id="header">head</div>
<div id="sidebar">side</div>
<div id="mainContent">main</div>
</div>

Width of #sidebar & #mainContent too wide (#mainContent gets bumped down):

 #container{
 **width:950px;**
 margin:0 auto;
 background:blue;
 }

#mainContent{
float:right;
**width:651px;**
background:red;

}

#sidebar{
float:left;
**width:301px;**
background:green;
}

Width of #sidebar & #mainContent fit inside container:

#container{
 **width:950px;**
 margin:0 auto;
 background:blue;
 }

#mainContent{
float:right;
**width:650px;**
background:red;
}

#sidebar{
float:left;
**width:300px;**
background:green;
}

btw...if you floated the two elements in the same direction, but their combined width is too wide, the last one in the source order would fit underneath the above floated element.

Answer 3

Does your h1 or img have a top margin? It will stick out of the top of the mainContent div and push it down.