I used to code my layouts with tables, but recently I've tried to switch over to doing all of the layout in CSS. It's been going alright up until now, and my current project is about .01% from driving me back to tables... and probably mad at the same time. So any insight you guys can give me would be great!

I have a center div (we'll call it div #1) that I need to stretch with the content to reach the bottom of the screen. I have my body tag set to height: 100%, and then the div's under that set to that as well, however it's not working. It only goes down the width of the current browser window (sometimes a little further), so if a user needs to scroll, div #1 won't show up past the scroll. I have an inside div that contains the content and it extends well past the end of the div #1, so what I need to know is how to get div #1 to fully contain div #2 and not let div# 2 extend past it.

I can set the height on some pages so it's not an issue, but on pages that will have dynamic content, the height will forever be changing. I currently have about 5 different header files to accommodate different sizes and I know that is just beyond crazy, so if you could help me figure this out that would be great!

Here's an example: http://www.gossipgirlonline.com/goss...rticles&page=1

Notice how the first main table ends a little past the scroll. Any help with this would be GREATLY appreciated.

Thank you!