Always vAlign Bottom

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • empiresolutions
    New Member
    • Apr 2006
    • 162
    #1

    Always vAlign Bottom

    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?

    Code:
    <!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>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
 
</div>

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

</body>
</html>
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      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>Untitl ed Document</title>
      <style type="text/css" title="">
      *{
      margin:0;
      padding:0;
      }
      html,body{
      height:100%;
      }

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

      }

      </style>
      </head>

      <body>
      <div id="wrapper">
      <div id="sidebar">Si debar</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">Bot tom Nav Div - this page is layingout correctly. </div>

      </body>
      </html>[/HTML]

        Comment

        • empiresolutions
          New Member
          • Apr 2006
          • 162
          #3
          Thanks for all the help. These links seem to provide similar ways to do what I'm looking for.

          http://scott.sauyet.co m/CSS/Demo/FooterDemo1.htm l

          http://ryanfait.com/sticky-footer/

          http://www.themaninblu e.com/writing/perspective/2005/08/29/

            Comment

            Previous template Next
            Working...