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; }