CSS Layout help

clearz

Hi I am trying to design myself a website and have put together the layout on paper what I need. I have a little bit of CSS expierence and thought it would be a simple matter, boy was I wrong. Two days later and a few extra gray hairs I have decided to give up and come here to try and look for some help from some more expierenced web designers. Here is a picture of the layout I am after


The header and footer are both 100px height with the footer split in two the footer should always be split down the middle regardless of the size of the page. The header and footer should always be 100px height regardless of the height of the page or if it is resized

The center is split into 3 columns. The left column is split in two which like the footer should always split exactly in two regardless of the height of the page. The right column is 25px and should always be visible. The center will fill the rest of the page and is the only fluid element The center should resize as the page is reiszed but all other elements should remain static.
Also the center will have overflow:scroll as the content will be way bigger than the viewable area.

You can see what I have done so far here
http://www.cuttz.com/index.html

As you can see the center height is the problem

Goodshape

That's quite a complex layout, tbh.

Some things to consider :

Instead of setting a width and height for your main content div (I think you have height : 75% at the minute), set absolute top, bottom, left and right values instead. ie.

   position : absolute;
   top : 100px;
   bottom : 100px;
   left : (however wide your left bit is)px;
   right : (however wide your right bit is)px;

And also... do your left columns have a wrapper/container div? If they do and there's a height set for the container, then setting the two elements to "50%" height will be a fixed 50% of the container height and won't change with the screen size. Instead, try getting rid of the container and experimenting with float and clear. Totally untested, but I'm thinking "float : left; clear : left; height : 50%;" ...and leave the container height out of it. Or absolute values might work for these too... Not sure.. I'm just throwing out ideas here

clearz

Thanks goodshape the bottom:100px is what I was after cant believe I diddnt think of it before.
you can see the finished layout here:
http://www.cuttz.com/test.htm

Thanks again
John