HTML/CSS positioning for Menus “float: bottom”

I am creating a horizontal menu, and I can't figure out how to align all 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;
  margi开发者_高级运维n: 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>

---

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>

---

Yes you can do that. Remove float for all menus and use display: inline-block and set vertical-align: bottom to fix to the bottom.

.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;
  display: inline-block;
  vertical-align: bottom;
}
.InventoryMenu_Selected {
  padding: 1em;
  height: 2em;
  width: 7em;
  background-color: #fbc;
  margin: 0 1em 0 0;
  display: inline-block;
}

<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>

Or set display:flex for the parent and set align-items: end

.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;
  display: flex;
  align-items: end;
}
.InventoryMenu {
  padding: 1em;
  height: 1em;
  width: 7em;
  background-color: #fbc;
  margin: 0 1em 0 0;
  
}
.InventoryMenu_Selected {
  padding: 1em;
  height: 2em;
  width: 7em;
  background-color: #fbc;
  margin: 0 1em 0 0;
  
}

<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>