HTML/CSS positioning for Menus “float: bottom”

Question

I am creating a horizontal menu, can't figure out how to alignall the menu options to the bottom of a container. Provided is an example to demonstrate what I'm trying to do, but the CSS code does not work as needed. Can you provide suggestions to get all the menu tabs to sit on the bottom?

<style>
.example1 {
  position: relative;
  width: 32em;
  height: 10em;
  background-color: #fbc;
  background-color: #fdb;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0;
}
.InventoryMenus {
  position: absolute;
  bottom: 0;
  background-color: #f00;
  padding:0;
  left: 1em;
}
.InventoryMenu {
  padding: 1em;
  height: 1em;
  width: 7em;
  background-color: #fbc;
  margin: 0 1em 0 0;
  float: left;
}
.InventoryMenu_Selected {
  padding: 1em;
  height: 2em;
  width: 7em;
  background-color: #fbc;
  margin: 0 1em 0 0;
  float: left;
}
</style>


<div id="example1" class="example1"><p>The bottom:0 method works in Firefox, Netscape 7+, IE5+/Win,
Opera 7+, Konqueror 3, Safari, and IE5/Mac.</p>
  <div class="InventoryMenus">

    <div class="InventoryMenu_Selected">one</div>
    <div class="InventoryMenu">two</div>
    <div class="InventoryMenu">three</div>
  </div>
</div>

Answer 1

Add margin to the element so that it is forced 1em down:

<style>
.example1 {
  position: relative;
  width: 32em;
  height: 10em;
  background-color: #0f0;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0;
}
.InventoryMenus {
  position: absolute;
  bottom: 0;
  background-color: #f00;
  padding:0;
  left: 1em;
}
.InventoryMenu {
  padding: 1em;
  height: 1em;
  width: 7em;
  background-color: #00f;
  /*This is where the magic happens*/
  margin: 1em 1em 0 0;
  /*Originally it was margin: 0 1em 0 0;*/
  float: left;
}
.InventoryMenu_Selected {
  padding: 1em;
  height: 2em;
  width: 7em;
  background-color: #0ff;
  margin: 0 1em 0 0;
  float: left;
}
</style>


<div id="example1" class="example1"><p>The bottom:0 method works in Firefox, Netscape 7+, IE5+/Win,
Opera 7+, Konqueror 3, Safari, and IE5/Mac.</p>
  <div class="InventoryMenus">

    <div class="InventoryMenu_Selected">one</div>
    <div class="InventoryMenu">two</div>
    <div class="InventoryMenu">three</div>
  </div>
</div>