Basically, I'm trying to get a div *bottom* to stick to the bottom of the page always, regardless if div *content* has enough data to push it down. Simple right? But it also needs to be able to align below the page just below *content* if the page needs to scroll, so it can't be aligned "absolutely". So how's it done? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Untitled Document</title> <style type="text/css" title=""> #sidebar { background-color: #00CC00; float: left; height: 100%; width: 250px; } #content { background-color: #FF66FF; float: left; height: 100%; width: 600px; } #bottom { background-color: #CCCCCC; clear: both; width: 500px; bottom: 0px; } </style> </head> <body> <div id="sidebar">Sidebar</div> <div id="content"> <p>Main Content Area </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="bottom">Bottom Nav Div - this page is layingout correctly. </div> </body> </html> Code (markup):
hi, if you always want the footer at the bottom at your page, then you should use tables (yeah i know, bad style etc.). i tried that a couple of times, but never found a way that worked in IE6, IE7 and FF at the same time without using tables. or google for "css 100% height problem". or you could add a footer and place that element as position:absolute; bottom:0; or so, but then you would always see the footer at the page.
Thanks for all the help. These links seem to provide similar ways to do what I'm looking for. http://scott.sauyet.com/CSS/Demo/FooterDemo1.html http://ryanfait.com/sticky-footer/ http://www.themaninblue.com/writing/perspective/2005/08/29/