Im new to making sites with CSS layouts rather than table layouts (my bad!).
Instead of having a table with 3 rows (A header, Body and a footer) im making 3 separate DIV's
How to I get my body DIV to stretch to 100% height so its a liquid page?
Thanks for any help!
You're looking for a vertical liquid page? So the header is at the top of the browser window, the footer at the bottom, and the body occupies the entirety of the space in between? If that's the case, you could do something like absolutely position your divs, sizing the main content relative to the dimensions of the container (which in this case is the browser window). The markup could be something like
Your body div will always be the height of the content contained within it. You could apply the rule height: 100%; to your body div, but this will not work in all browsers. Also if your header and footer have already got heights you will need to take these into account.
If you are just trying to force your footer to the bottom of your pages I would suggest trying one of these two methods. Sticky Footer
Your best bet would be the sticky footer - positioning elements absolutely is never a good idea, unless it's used sparingly and never for major structural elements.
Using Brian's markup the content area doesn't seem to stretch to 100% height in good ol' IE6 any suggestions?