DIV Positioning Question - Stacking

[rhnewfie]

Say I have 4 div's on my page

Header
Navigation
Main
Footer

How could I set that up so that they stack on top of each other and if say the main div gets taller, the footer just automatically moves down?

Thanks!!

 

[vacunita]

For that, you really don't need to do anything, that is the default behavior.

<div id="header"></div>
<div id="navigation"></div>
<div id="main"></div>
<div id="footer"></div>

----------------------------------
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.

 

[rhnewfie]

I do that, but if I fill the main div with text then the footer shoots waaaaaaaaaay down the page!

 

[vacunita]

How much text are you adding?

The footer would move down, if it is pushed down by the main content. so there has to something their adding content for the footer to be shooting down.



----------------------------------
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.

 

[traingamer]

That's pretty much the default if you put the footer last in your code. (Although I'm guessing that's really not what you're asking).
One way (of many):

<div id="wrapper">
<div id="header">Header stuff</div>
<div id ="content">Float this left with a width of 69% in your css</div>
<div id="nav">float this right with a width of 30% in your css</div>
<div id="footer">clear: both in the css</div>
</div>

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[rhnewfie]

GOT IT!! It was some sneaky div code that someone stick in there that was causing a problem. The positioning threw everything out of whack!

 

[traingamer]

boy, I'm slow...

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill