Welcome to WebmasterWorld Guest from 54.163.168.15

Forum Moderators: not2easy

Template layout - tableless

   
3:15 am on Jun 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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?
5:37 pm on Jun 16, 2012 (gmt 0)



You need to clear both elements before the footer

Try

#footer
{
clear:both;
margin: 0 0px;
}
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month