473,396 Members | 1,714 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 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 2907
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

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

Similar topics

1
by: Nick | last post by:
I have a image buttom to close the popup window. Any easy way to make the image buttom to sink at the bottom of the window? And the buttom should flow with the text/table if the text flow is longer...
10
by: Markus Ernst | last post by:
Hi I have a strange problem with vertical-align. The case can be viewed at http://www.brainput.info/geschichte.html. HTML code: <div id="bild"><img src="geschichte.gif" width="274"...
3
by: Michael Goldbach | last post by:
Hi, I'm currently encountering a problem with vertical alignment of text in a DIV that drives me mad. I'm having a DIV with a fixed height (say 50px) which contains some text from which I...
3
by: Werner Eggert | last post by:
Hello, i have a frameset with 3 rows. The top row of the frame has a table (height: 50px). This table should be aligned on bottom of the Top-Frame (height: 100px). The problem: at the moment the...
2
by: Newry | last post by:
Hi, I'm trying to position something with CSS, to have the equivalent of: <table> <tr> <td><img src="foo.jgp"></td> <td valign=bottom>Label</td> </tr> </table>
2
by: Sean Dudley | last post by:
Hi, I would like my application to be always on the bottom (like the desktop). I tried always setting it to the lowest ZOrder whenever there is a ZOrder change but this doesn't seem like the best...
2
by: Tasman | last post by:
Is there an equivalent of valign="bottom" for a table within a DIV using CSS? I've found I can center a table of buttons in a DIV with {margin-left:auto; margin-right:auto}. But I am unsure how...
2
by: Patrick Sullivan | last post by:
Hi people, I've been trying to get the text of a menu list to align at the bottom of a table cell. Can't get to work with html or css and html. Menu should be lined up with bottom right of logo....
3
by: maya | last post by:
hi, pls take a look, http://www.mayacove.com/misc/ss_html.gif I need the blue image ("reading is fundamental") to be at the bottom... the hight of content at the left will vary, but that...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.