How to float a div to bottom of another div?

[TechieSooner]

Basically I've got a header div.
Inside that header div, I've got another div that the horizontal menu sits in. The menu works fine, but it's appearing at the TOP of the header instead of at the bottom. How do I float this div down to the bottom of the header div, so that the menu appears at the bottom of it?

I've tried float:bottom, but it doesn't seem to do anything. Float:right works, but float:bottom doesn't seem to do squat?

 

[PTNL]

Some options here may help.

 

[TechieSooner]

Cool beans.
So float:right won't work with that method? I've gotten it to the bottom but now it's lost my float:right capability apparently...

 

[PTNL]

Can you post your markup and stylesheet snippets?

 

[TechieSooner]

Well it's Drupal so I'll do the best I can...

#header {
background-color: inherit;
margin: 0 auto;
padding: 0;
width: 100%;
position:relative;
}
#header-last {
float: right; /* LTR */
position:absolute;
bottom:0;
width: 700px;
}

<div id="page" class="clearfix">

<div id="skip">
<a href="#main-content">Skip to Main Content</a>
</div>
<div id="header-wrapper">
<div id="header" class="clearfix">


<div id="header-first">

<div id="logo">
<a href="/" title="Home"><img src="/sites/default/files/acquia_marina_logo.png" alt="Home"></a>
</div>
</div><!-- /header-first -->

<div id="header-middle">
</div><!-- /header-middle -->

<div id="header-last">
<div id="primary-menu">
<ul class="menu"><li class="leaf first active-trail"><a href="/" title="" class="active">Home</a></li>
<li class="expanded"><a href="/" title="" class="active">About</a><ul class="menu"><li class="leaf first"><a href="/" title="" class="active">About Company</a></li>
<li class="leaf last"><a href="/" title="" class="active">About President</a></li>
</ul></li>
<li class="expanded last"><a href="/" title="" class="active">Quick Links</a><ul class="menu"><li class="leaf first"><a href="docs" title="">Access Documents</a></li>
<li class="leaf last"><a href="email" title="">Check Email</a></li>
</ul></li>
</ul> </div><!-- /primary_menu -->
</div><!-- /header-last -->

</div><!-- /header -->
</div><!-- /header-wrapper -->

 

[wags]

Don't try to use "float: right;" if you're using absolute positioning. Instead, use "right: 0;" on #header-last

 

[TechieSooner]

Don't try to use "float: right;" if you're using absolute positioning. Instead, use "right: 0;" on #header-last

You guys are awesome

 

[wags]

No problem, glad to help!