View Full Version : DIV not stretching with content

Apr 13th, 2010, 03:45 AM
Hey everyone, I'm currently working on a site and am having trouble with pesky positioning and DIV stretching. I've been searching through my code and through the interwebs, still haven't come up with anything. Maybe it's because I'm rushing to get this done and not taking the time to calm down, but who knows.

Website: http://missioncityproductions.com/site/
Positioning & Interface style sheet: http://missioncityproductions.com/site/interface.css
Font stylesheet: http://missioncityproductions.com/site/fonts.css

If you look at the website, it's pretty obvious what I'm trying to do. I'm trying to get the #body div to extend to the very bottom of the page, whether the content requires the page to be scrolled or not. I've never had luck with CSS and this, so any help would be appreciated as far as my code goes.

I had the #body div going to the bottom of the page when it wasn't scrolling, but then when I got to the team page (the longest page of all of them) it would not continue beyond the original viewpoint height. Since then I started tinkering with different positioning and didn't add comments as to what the original positions were.

I suspect that there is just way too much positioning going on and that is taking the content DIV's out of the flow of the page and therefore is outside of the div that needs to be stretching. I still am having trouble understanding this aspect of CSS, so once again any help is extremely appreciated; considering this problem has happened on numerous websites of mine and I have a feeling it will happen again if I don't figure it out for good.

Thanks in advance for any help, and don't mind the header. I'm working on a fix for that since my original plan of a repeating background in a container div and then 3 div's inside of that failed due to some weird designing issues..

Apr 13th, 2010, 04:18 PM
You could try putting a br clear at the end of the div.

<br style="clear:both;">

Put this before the ending tag of the div you want to extend.