homepage Welcome to WebmasterWorld Guest from 204.236.254.124
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Template layout - tableless
whatson




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

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?

 

legaleagle




msg:4466290
 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;
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved