471,599 Members | 1,302 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,599 software developers and data experts.

Always vAlign Bottom

162 100+
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?

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. <title>Untitled Document</title>
  6. <style type="text/css" title="">
  7. #sidebar {
  8.     background-color: #00CC00;
  9.     float: left;
  10.     height: 100%;
  11.     width: 250px;
  12. }
  13. #content {
  14.     background-color: #FF66FF;
  15.     float: left;
  16.     height: 100%;
  17.     width: 600px;
  18. }
  19. #bottom {
  20.     background-color: #CCCCCC;
  21.     clear: both;
  22.     width: 500px;
  23.     bottom: 0px;
  24. }
  25.  
  26. </style>
  27. </head>
  28.  
  29. <body>
  30.  
  31. <div id="sidebar">Sidebar</div>
  32.  
  33. <div id="content">
  34.   <p>Main Content Area </p>
  35.   <p>&nbsp;</p>
  36.   <p>&nbsp;</p>
  37.   <p>&nbsp;</p>
  38.   <p>&nbsp;</p>
  39.  
  40. </div>
  41.  
  42. <div id="bottom">Bottom Nav Div - this page is layingout correctly. </div>
  43.  
  44. </body>
  45. </html>
  46.  
Nov 10 '07 #1
2 2869
drhowarddrfine
7,435 Expert 4TB
This isn't exactly what you want but I don't have time to do more (from memory of what I've done before) so I slapped this together and hopefully you can play with it. Of course, IE6 screws it up.
[HTML]<!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="">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}

#wrapper{
position:relative;
background-color:#ddd;
height:100%;
overflow:auto;
}
#sidebar {
background-color: #00CC00;
position:absolute;
top:0;
bottom:0;
width: 250px;
}
#content {
background-color: #FF66FF;
/* margin-left:250px; */
position:relative;
left:250px;
width: 600px;
}
#bottom {
background-color: #CCCCCC;
position:absolute;
bottom:0;
width: 500px;

}

</style>
</head>

<body>
<div id="wrapper">
<div id="sidebar">Sidebar</div>

<div id="content">
<p>Main Content Area </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</div>
</div>
<div id="bottom">Bottom Nav Div - this page is layingout correctly. </div>

</body>
</html>[/HTML]
Nov 10 '07 #2
empiresolutions
162 100+
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/
Nov 14 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Nick | last post: by
10 posts views Thread by Markus Ernst | last post: by
3 posts views Thread by Michael Goldbach | last post: by
3 posts views Thread by Werner Eggert | last post: by
2 posts views Thread by Sean Dudley | last post: by
2 posts views Thread by Patrick Sullivan | last post: by
2 posts views Thread by XIAOLAOHU | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.