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; 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>
Best Answer
Add margin to the element so that it is forced 1em down: