Ok, I know this is probably really easy and simple, but I am really struggling. I want a simple layout like:
***********HEADER***********
************NAV*************
SIDE
NAV
*** MAIN
*** CONTENT
***
*******FOOTER***************
Currently I use:
<div align="center">
<div id="contain">
<div id="header">HEADER</div>
<div id="leftnav">NAV</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</div>
</div>
with css:
#container
{
width: 1000px;
margin: 0;
}
#header
{
margin: 0 0px;
}
#leftnav
{
float: left;
width: 130px;
margin: 0 0px;
}
#content
{
float: left;
width: 870px;
margin: 0 0px;
}
#footer
{
margin: 0 0px;
}
But the issue I face is that when the left hand nav is longer than the main content, the footer is not at the bottom of the page, and is just below where ever the content ends.
And if the content is longer than the nav, then there is lots of white space below the left nav, between the footer.
I think I may need some extra div in there to facilitate the layout, but I have played around and had no luck. What am I doing wrong?
