cesarcesar Posted November 10, 2007 Share Posted November 10, 2007 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> Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted November 10, 2007 Share Posted November 10, 2007 you need to turn your css into dhtml with javascript to do what your looking for. search google for "floating div". Quote Link to comment Share on other sites More sharing options...
cesarcesar Posted November 14, 2007 Author Share Posted November 14, 2007 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/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.