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'>© 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
Similar Threads
