Page 1 of 1

Bottom alignment???

Posted: Fri Mar 16, 2007 1:19 am
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>

Posted: Fri Mar 16, 2007 2:08 am
by matthijs

Code: Select all

<div style="position: relative; background-color: red;height:100%;">Menu tabs go here</div>
Is this what you mean?

Posted: Fri Mar 16, 2007 12:18 pm
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 :)

Posted: Fri Mar 16, 2007 2:25 pm
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?

Posted: Fri Mar 16, 2007 3:36 pm
by alex.barylski
Bam...matthijs...you are the best amigo :)

Muchly appreciated :)