homepage Welcome to WebmasterWorld Guest from 54.166.255.168
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, Moderators: not2easy

CSS Forum

    
Template layout - tableless
whatson

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4465217 posted 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#: 4465217 posted 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