Bottom alignment???

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Bottom alignment???

Post by alex.barylski »

I have the following HTML file and I am trying to get the RED DIV to align to the bottom of the blue container div, much like the black footer is aligned with the screens bottom. I've done this before, but of course I cannot find the code to reproduce how I did this...

Any suggestions?

Here is the code so far:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Title</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>

      html, body {
        margin: 0px;
        padding: 0px;

        width: 100%;
        height: 100%;

        min-width: 700px;
      }

      #wrap {
        position: relative;
        margin: 0 auto; /* center, not in IE5 */
        padding: 0px;

        width: 100%;

        height: auto !important;
        height: 100%;

        min-height: 100%;
      }

      #head {
        height: 80px;
        bottom: 0;
        background-color: darkblue;
      }

      #foot {
        position: absolute;
        width:100%;

        bottom: 0;

        background-color: black;
      }

    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="head">
        <div style="position: relative; background-color: red;">Menu tabs go here</div>
      </div>
      <div>
        Some body stuff
      </div>
      <div id="foot">
        Some footer
      </div>
    </div>
  </body>
</html>
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Code: Select all

<div style="position: relative; background-color: red;height:100%;">Menu tabs go here</div>
Is this what you mean?
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Hey man, thanks for the quick reply...

I haven't tested, but I don't think that is what I have in mind. I need the red menutab to remain a variable height (according to it's children text sizes, images, etc). as it stands with my code, the tab is top aligned.

I need that tab menu aligned with the bottom of the blue header, thus the reason I thought I would need to use bottom: 0 but thaqt doesn't seem to work???

Thanks again :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Aha, maybe I do understand what you want.

Code: Select all

#header {
  position:relative;
  height:somevalue; /* or let it be dependent on the content */
}
#navtabs {
  position:absolute;
  bottom:0;
  left:0; /* or whatever */
  height:2em; /* or .. */
}
Now the navtabs will always stay at the bottom of the header div, no matter what the height of the header becomes. Do a google search for ... wait here it is http://stopdesign.com/articles/absolute/

Hope this is what you mean?
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Bam...matthijs...you are the best amigo :)

Muchly appreciated :)
Post Reply