How to align a div on the bottom of another one (using css)?

R

Rafael Cotta

Hi all,

I am trying to desgign a website without tables (tableless) but I
cannot figure out how to put a "footer" <div> inside another one with
height 100%.

What I need is the footer positined on the bottom of the page when
there's not much content and when there's a lot of contents.

I'll try to make myself a little bit more clear showing the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style type='text/css'>
body {height: 100%; margin: 0px; font-family: Verdana,
sans-serif; background: #cccccc;}
div {text-align: left; }
.title {background: #61b6f5; font-size: 24px; padding: 4px; }
.maindiv{height:100%; width: 750px; border: 1px #216695 solid;
border-top: 4px #216695 solid; background: white;}
.content{clear: both;}
.footer {background: green; height: 25px;}
</style>

</HEAD>

<BODY>
<center style='height: 100%'>
<div class="maindiv">
<div class='title'>Page Title</div>
<div class='content'>
<p>Some content... more content...</p>
</div>
<div class='footer'>&copy; me</div>
</div>
</center>
</BODY>
</HTML>

The green bar must be on the bottom, but I don't know how to do this.
Is there a solution (without JavaScript)?

Rafael
 
L

Lawrence

Rafael Cotta said:
Hi all,

The green bar must be on the bottom, but I don't know how to do this.
Is there a solution (without JavaScript)?

Rafael

Does this work for you?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type='text/css'>
body {height: 100%; margin: 0px; font-family: Verdana,
sans-serif; background: #cccccc;}
div {text-align: left; }
.title {background: #61b6f5; font-size: 24px; padding: 4px; }
.maindiv{height:100%; width: 750px; border: 1px #216695 solid;
border-top: 4px #216695 solid; background: white;}
.content{clear: both;}
.footer {background: green; height: 25px; width:750px;}
</style>
</HEAD>
<BODY>
<center style='height: 100%'>
<div class="maindiv">
<div class='title'>Page Title</div>
<div class='content'>
<p>Some content... more content...</p>
</div>
</div>
<div class='footer'>&copy; me</div>
</center>
</BODY>
</HTML>

Pull the height:100% out of .maindiv and it's resizable.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,900
Latest member
Nell636132

Latest Threads

Top