DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 9 of 9

Thread: Always vAlign Bottom

  1. #1
    Join Date
    Feb 2007
    Posts
    79

    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>

  2. #2
    Join Date
    Oct 2005
    Location
    Maady
    Posts
    1,819
    you need to do it in JAVA SCRIPT, HTML can't do this .
    Programmer&Cracker CS
    MyBlog:Blog.Amahdy.com
    MyWebsite:www.Amahdy.com

  3. #3
    Join Date
    Mar 2007
    Location
    Bangalore, India
    Posts
    247
    There are a couple of workarounds.

    1) Perhaps the best option that works by using a table:
    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;
    }
    
    
    #tab {
     height: 100%;
    }
    
    #contentTab {
     height: 100%;
    }
    </style>
    </head>
    
    <body>
    
    <div id="sidebar">Sidebar</div>
    <table id="tab">
    <tr id="contentRow"><td>
    <div id="content">
      <p>Main Content Area </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
     
    </div>
    </td></tr>
    <tr><td>
    <div id="bottom">Bottom Nav Div - this page is layingout correctly. </div>
    </td></tr>
    </table>
    </body>
    </html>
    You may also want to put the sidebar in the table. This is a one-size-fits-all solution, works in IE and Firefox. Might have issues with some browsers (but not probable)

    2) If you know the exact or near exact height of the *bottom* div, then you could use a table to align stuff so:

    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="">
    #tab {
     height: 100%
    }
    #bottomRow {
     height: 20px; /*Or whatever is applicable */
    }
    #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>
    <table>
    <tr><td>
    <div id="content">
      <p>Main Content Area </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
     
    </div>
    </td></tr>
    <tr id="bottomRow"><td>
    <div id="bottom">Bottom Nav Div - this page is layingout correctly. </div>
    </td></tr>
    </body>
    </html>
    You may also want to lay the sidebar in the table.

    3) You can use the table layout, and give about a 10% or 20% as height for the bottomRow, and use the overflow: auto or overflow:scroll property for the *content* div.

    Do let me know if it worked.

  4. #4
    Join Date
    Oct 2005
    Location
    Maady
    Posts
    1,819
    Hello Razee;
    I think he just want the bottom bar to stick at the end, not to be after the page contents but just to be at the end of the web explorer page, and when he scroll, to be there always , or am I wrong with this ? so I think this couldn't be done without Java-Scirpt or a scripting language finally ...

    otherwise for the table; I suggest this solution :

    Code:
    <table>
    	<tr><td colspan=2>TOP BAR *****************</td></tr>
    	<tr><td>SIDE BAR</td>
    		<td>
    			<table>
    				<tr><td>first line</td></tr>
    				<tr><td>2nd line</td></tr>
    			</table>
    		</td>
    	</tr>
    	<tr><td colspan=2>buttom BAR *******************</td></tr>
    </table>
    Programmer&Cracker CS
    MyBlog:Blog.Amahdy.com
    MyWebsite:www.Amahdy.com

  5. #5
    Join Date
    Oct 2005
    Location
    Maady
    Posts
    1,819
    I mean put many DIVs , lines ... and tables as you want in one TD and when nessesary use colspan and rowspan ...
    Programmer&Cracker CS
    MyBlog:Blog.Amahdy.com
    MyWebsite:www.Amahdy.com

  6. #6
    Join Date
    Mar 2007
    Location
    Bangalore, India
    Posts
    247
    Option #1:

    This is for use when you have the exact value in pixels (or pt) for the height of the footer (bottom div, which I have named footer). Here, the padding-bottom CSS property of the body tag is set to the height of the footer, and we use absolute positioning to make the footer div overlap this padding. Now, the content <div> tag (contentDiv) is set to take 100% of available space (for height). Note that the overflow CSS property has been set to auto. It should be either auto or scroll for the scroll bars to appear. With auto, scroll bars will appear when content overflows only. Also note that the positioning for this div is *NOT* absolute, and then this will not work.

    Code:
    <html>
    <head>
    <style>
    body
    {
     padding: 0px;
     padding-bottom: 55px;
     margin: 0px;
     overflow: hidden;
    }
    #contentDiv
    {
     height: 100%;
     width: 100%;
     overflow: auto;
    }
    #footer
    {
     position: absolute;
     bottom: 0px;
     width: 100%;
     left: 0px;
     height: 55px;
     background-color: #CCCCCC;
    
    }
    </style>
    </head>
    <body>
    <div id="contentDiv">
     Contents go here
    
    </div>
    
    <div id="footer">
     Footer come here
    </div>
    </body>
    </html>
    Option #2:
    This option has very slight modifications from the first. In this, absolute positioning is not required. (I have given it, but you can safely remove it and not specify the bottom and left properties). The major change is that the first div (the contentDiv) is set to take 90% of available display space, and the footer is set to take 10%. The height is specified in %age. It has its own advantage and problems, as you might experience sometimes. Do let me know it it worked or not.

    Code:
    <html>
    <head>
    <style>
    body
    {
     padding: 0px;
     margin: 0px;
     overflow: hidden;
    }
    #contentDiv
    {
     height: 90%;
     width: 100%;
     overflow: auto;
    }
    #footer
    {
     position: absolute;
     bottom: 0px;
     width: 100%;
     left: 0px;
     height: 10%;
     background-color: #CCCCCC;
    
    }
    </style>
    </head>
    <body>
    <div id="contentDiv">
     Contents go here
    
    </div>
    
    <div id="footer">
     Footer come here
    </div>
    </body>
    </html>

  7. #7
    Join Date
    Oct 2005
    Location
    Maady
    Posts
    1,819
    great job... "bottom"
    still not HTML but CSS, anyway this was really good . thanks. hope that the OP has more info now.
    Programmer&Cracker CS
    MyBlog:Blog.Amahdy.com
    MyWebsite:www.Amahdy.com

  8. #8
    Join Date
    Mar 2007
    Location
    Bangalore, India
    Posts
    247
    I think cesarcesar wanted a CSS solution only when he was talking about absolute position not being able to do it. For the second, option, you don't need bottom / left. only width and height, and no absolute positioning either. But, I am not sure if you can set the scrolling property for a div. I think not. You have to use CSS for that.

  9. #9
    Join Date
    Feb 2007
    Posts
    79
    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/...ve/2005/08/29/

Similar Threads

  1. Bottom Alignment
    By cesarcesar in forum Web
    Replies: 4
    Last Post: 11-20-2007, 07:32 AM
  2. Top (htm) and bottom (asp) frames
    By Tony WONG in forum VB Classic
    Replies: 2
    Last Post: 08-29-2005, 10:23 PM
  3. Replies: 0
    Last Post: 05-27-2003, 11:11 PM
  4. Replies: 4
    Last Post: 05-15-2001, 01:13 AM
  5. Replies: 0
    Last Post: 05-14-2001, 06:45 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center