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

 
<!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>

Nov 10 '07 #1

Subscribe Post Reply

2906

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> </p>
<p> </p>
<p> </p>
<p> </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

Similar topics

image sink to bottom of the window?

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...

Javascript

vertical-align:bottom not working

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"...

HTML / CSS

Bottom-aligned text in a fixed-height DIV

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...

HTML / CSS

table should be aligned on bottom of a Frame

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...

HTML / CSS

align a text relative to the bottom of a floated image

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>

HTML / CSS

Application always on bottom

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...

C# / C Sharp

Is there an equivalent of valign="bottom" for a table within a DIV using CSS?

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...

HTML / CSS

can't get ul list on bottom of table cell

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....

HTML / CSS

no float:bottom -- what can be used instead??

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...

HTML / CSS

Merging data from multiple Excel files

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...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

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...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

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...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice