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

Discussion in 'HTML' started by Rafael Cotta, Apr 29, 2005.

  1. Rafael Cotta

    Rafael Cotta Guest

    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
    Rafael Cotta, Apr 29, 2005
    #1
    1. Advertising

  2. Rafael Cotta

    Lawrence Guest

    "Rafael Cotta" <> wrote in message
    news:...
    > 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.
    --
    Lawrence
    http://www.netmidwest.com/
    Host With The Best - NetMidWest!
    Lawrence, Apr 29, 2005
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dan
    Replies:
    1
    Views:
    8,363
    ainigma
    Apr 4, 2008
  2. Andrew
    Replies:
    1
    Views:
    3,588
    Travis Newbury
    Jan 12, 2005
  3. Replies:
    0
    Views:
    2,740
  4. Noozer
    Replies:
    1
    Views:
    7,147
    Carolyn Marenger
    Mar 13, 2006
  5. Steve Richter
    Replies:
    1
    Views:
    897
    Mark Rae
    Jun 24, 2007
Loading...

Share This Page