DIV positioning problem - please help?

[Sanderse]

Preparing for a new website, I have spent many, many, many hours on div

positioning but I can't get my divs positioned correctly.

I'm not a big CSS expert yet, this is my 2nd website using CSS.

 

PLEASE HELP?

 

Please take a look at http://www.metstip.nl/abc/cc.htm

Further below my css is shown.

 

Some explanation:

#container has a fixed width and vertically fills the viewport.

 

#c2 its only function is to carry "float: left;" so that the divs inside c2 can

float.

#c2 fills up #container.

 

#left and #right have fixed widths and should vertically fill #c2.

#left and #right are each going to contain a picture positioned at their bottoms;

so the pictures should always be at the bottom of the viewport.

 

#logo will have a fixed height and width, there will be a picture in here.

 

#menu will have a fixed width;

#menu will contain a table with about six menu choices; no problem here, this will

always vertically fit inside #c2

 

#body will have a fixed width;

when the body contains not too much text, there's no problem. When there is much text, the content should scroll (overflow: auto;)

Here is my big problem: the div exceeds the bottom of #container with the height

of #logo  !!!! I can't get this right.

 

#right should be at the top, just like #right, and not exceed the bottom of #c2;

actually the same problem as with #body.

 

NB: All coloured borders are just there to make the divs visible during testing.

Later on the borders will be set to zero.

The page should look the same at least in IE6 and higher, Firefox and Opera.

 

Thanks in advance for your help.

Regards, Jack

 

html, body { 
margin: 0; padding: 0;
height: 100%; 
}

#container {
position: relative;
width: 1000px; 
height: 100%;
margin: 0 auto 0 auto;
padding: 0;
border: 3px solid #888888; 
}

#c2 {
float: left;
width: 100%; 
height: 100%;
margin: 0;
padding: 0;
border: 3px solid #ff66cc; 
}

#logo {
float: left;
width: 770px; height: 40px;
margin: 0; padding: 0;
border: 3px solid yellow;
}

#left {
float: left;
width: 100px; min-height: 100%;
margin: 0;
border: 3px solid #00ffff;
}

#menu {
float: left;
width: 130px; height: 400px;
margin: 0;
border: 3px solid blue;
}

#body {
float: left;
width: 600px; 
height: 100%;
margin: 0;
margin-bottom: 50px;
overflow: auto;
border: 3px solid #33cc66;
}

#right {
float: right;
width: 100px; min-height: 100%;
margin: 0;
border: 3px solid #00ffff;
}

[TheFilmGod]

You don't have to specify "position: relative" UNLESS you are using absolute positioning - which you aren't. Are you clearing your floats? That would be a HUGE problem. Do not use borders to "paint" the divs on the screen. Instead, I recommend you to use the background property. When using borders, a 3px width is added to all sides of the div. Therefore instead of being 100px by 80 px the div becomes 106px by 86 px!

 

You're also trying to do too much at once. Before you can solve these problems you need to get the main container and it's first child div to align properly! Once you do that, you're more than welcome to move on further into the hierarchy of divs.

 

I hope that helps!