make the content div stretch automatically and keep the footer below?

[tianaPalmer]

I'm creating a web site (it isn't live yet to show) that has different lengths, based on the content in the main area.

Every time I make a new page for the site (copying and renaming that file), I have to basically create a new CSS style sheet so that I can stretch that particular page's content area to fit what I need to put in there. I also have to re-position the footer so that it will still be under the content area. I can already see this being a nightmare if I need to add more or take away content in the future.

Is there someway I can always keep the footer under the content area and make the content area automatically stretch to fit the content I put in there?

Plus, I don't want to have a css style sheet for every single page...doesn't that defeat the purpose of a style sheet?

Oh also, is there a way I can make the side divs that contain the page's shadows stretch with all of this automatically as well?

Thanks so much!

 

[BigRed1212]

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

 

[tianaPalmer]

ok...so let me make sure i'm reading this right (i'm teaching myself this...please be patient!)
so i don't specify a height to the main content div, it will automatically stretch to the content? and while it stretches, the footer will automatically move down to stay below the main content area?

 

[BigRed1212]

Umm, maybe. Depends on what the rest of your mark up looks like.

I think the things that keeps the footer down is clear:both;

 

[vacunita]

Depending on your CSS, and markup this:

so i don't specify a height to the main content div, it will automatically stretch to the content? and while it stretches, the footer will automatically move down to stay below the main content area?

Is basically right.
Of course if you are using absolute positioning or floating or other special CSS styling it may not work exactly like that.

The easiest way of doing what you need.
Is just have the content div have no height, and a footer DIV immediately after.

And no, clear:both as it implies clears any floating that has been applied, it doesn't on its own do anything to a footer.

<div id=container>
content goes here
</div>
<div id=footer>
footer stuff in here. 
</div>

The above code without any CSS applied should make the div expand with its content and push the footer down as needed.








----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.