Hello, i'm trying to make a css layout but i have a problem that i can't fix . The div cointaining the lateral menu in my layout is not pushing the div of the footer, instead it's displayed over it. like this: Can someone help me solve this? Thanks in advance. Gaston
Yes, here is it. Thanks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>CodingFAQ</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <style media="all"> body, td { font-family: "Bitstream Vera Sans", "Trebuchet MS", Geneva, Verdana, Arial, Helvetica, sans-serif; font-size: 80.01%; } body, h1, h2, h3, h4, h5, h6, div, p, table, td, ul, ol, li, dd, dt, dl, blockquote, address, hr, pre { margin: 0; padding: 0; } a { text-decoration: none; } a:hover { text-decoration: underline; } a:visited { text-decoration: none; } form { margin: 0; padding: 0; } fieldset { margin-bottom: 1em; padding: .5em; } img { border: 0; } hr { height: 1px; border: 1px solid gray; } p { padding: 0; margin: 0; margin-bottom: 0.8em; } h1 { font-size: 200%; } h2 { font-size: 175%; } h3 { font-size: 125%; } /** * Main wrapper around the div containers */ #wrapper1 { min-width: 731px; background: #eee url(menu.jpg) top left repeat-y; } #wrapper1, #wrapper2 { margin: 0px; padding: 0px; } #topBar { height: 84px; background-color: #E0E8F0; } #logo { width: 239px; height: 84px; background-color: #E0E8F0; float: left; } #banner { height: 60px; width: 468x; background-color: #E0E8F0; float: right; padding: 11px; } #navBar { height: 29px; background-color: #B0C4DE; text-align: right; border-bottom: 1px dashed; border-top: 1px dashed; } #footer { height: 20px; background-color: #B0C4DE; border-top: 1px dashed; text-align: center; padding: 10px; } #sideBar { width: 200px; background-color: #F2F4F7; float: left; font-size: 100%; } #contentArea { margin-left: 201px; background-color: #ffffff; padding-left: 10px; padding-right: 10px; padding-top: 15px; padding-bottom: 10px; } /** * Categories */ #categories { width: 200px; padding: 0; font-size: 100%; border: 0px; background-color: #F2F4F7; } #categories ul { list-style: none; margin: 0; padding: 0; border: none; } #categories li { margin: 0; border-color: #B0C4DE; } #categories li a { display: block; padding: 5px 5px 5px 0.5em; border-bottom: 1px dashed; text-decoration: none; border-color: #000000; background-color: #F2F4F7; color: #000000; height: 100%; /* stupid IE fix */ } html>body #categories li a { width: auto; } #categories li ul li { margin: 0; border-left: 0px } #categories li ul a { padding-left: 15px; } #categories ul ul ul a { padding-left: 25px; } #categories ul ul ul ul a { padding-left: 35px; } #categories .active { } #categories .subcat a { } #categories .subcat .active { } #categories li a:hover { background-color: #E0E8F0; color: #000000; } #categories .active { background-color: #E0E8F0; } #categories .subcat a { background-color: #F2ECEC; } #categories .subcat .active { background-color: #ECF2ED; } #navlinks { margin: 0px; padding-top: 5px; } #navlinks ul { margin: 0px; padding: 0px; border: none; list-style: none; } #navlinks li { display: inline; } #navlinks ul a { font-size: 100%; border-left: 1px dashed; text-decoration: none; border-color: #000000; background-color: #B0C4DE; color: #000000; padding-top: 5px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; height: 100%; } #navlinks ul a:hover { background-color: #E0E8F0; } </style></head><body> <div id="wrapper1"> <div id="wrapper2"> <div id="topBar"> <div id="logo"> <img src="logo.jpg" alt"" /> </div> <div id="banner"> <img src="banner_cf.gif" alt"" /> </div> </div> <div id="navBar"> <div id="navlinks"><ul><li><a href="http://www.webmastershelp.com">Advanced Search</a></li><li><a href="http://www.webmastershelp.com">Submit Question</a></li><li><a href="http://www.webmastershelp.com">Add Content</a></li><li><a href="http://www.webmastershelp.com">Open Questions</a></li><li><a href="http://www.webmastershelp.com">Contact</a></li></ul></div> </div> <div id="sideBar"> <div id="categories"> <ul> <li class="home"><a href="http://www.webmastershelp.com">ASP & .NET</a></li> <li><a href="http://www.webmastershelp.com">PHP</a></li> <li><a href="http://www.webmastershelp.com">HTML, CSS & Javascript</a></li> </ul> </div> </div> <div id="contentArea"><h2>CodingFAQ.com</h2><hr><br /> Hello all, I cant figure out why but on this page http://www.jobsinswindon.com/applywi...ture-rss-feeds ie one of the blog posts the left menu column drops below the main content. <br /> The wierd thing is the blog homepage is fine so i dont understand. <br /> All is fine in FF. <br /> please help as i have no idea why <br /> Thanks<br /><br /> Yeah, I know. However, I've been changing they way I code CSS recently and made a habit of separating all my patches/hacks from the rest of the pages (putting them in separate files) so I know where they are in the future. <br /> I find it's much tidier to code like that and lets others know that you're targetting a specific bug, helping them to learn quicker, rather than forgetting if it remains thrown in with the rest of the properties. </div> <div id="footer"> © 2006 CodingFAQ.com. All rights reserved. </div> </div> </div> </body></html> HTML:
Thanks for your help but i don't fully understand the pointed article. How do i enclose my float elements? I tryed using position: absolute; left: 0; istead of float: left; for the lateral menu but the problem is not solved.
Sorry for all the extra code :S. To see the problem remove the content of the main div, the one with id="contentArea"
Still not working Have you tested it?. i tryed with IE and firefox, in both of them the lateral menu is over the footer. Thanks for your time
It seems this is a normal problem. i mean to push the footer with the columns and make them look the the same long. Here is a good layout to start http://www.pmob.co.uk/temp/2colum_sourceorder_image.htm
What i need is that the lateral navbar pushes the footer so that it doesn't not appear under the menu but in the bottom of the page. It looks like this now http://www.codingfaq.com/screenshot.jpg i want it to look like this http://www.codingfaq.com/screenshot2.jpg
I got it, adding clear:both; to the footer seems to have solved it . I'll soon post the final code for you to see Thanks so much for your help