I have a horizontal navbar in the form of an unordered list, where the list items are all floated left, and the list has overflow:hidden; for consistency. I want the "active" tab to be taller, without changing the layout of the list element.
The navbar is 60px tall with each list item 50px tall, and I want the active tab to be 55px. The question is, how do I get the list items to "stick" to the bottom of the navbar, without changing their horizontal positioning?
Things I've tried: (this list will grow)
ul#nav{position:relative;} and ul#nav li{position:absolute;bottom:0;} stacks all elements on top of each other; I refuse to hard-code each tab's positionul#nav li.active {position:relative;bottom:/* difference in heights */;} leaves the block where the tab originally was empty, effectively acting as an unwanted marginThe solution was simple (and I'd already been using it for styling of list items). Rather than style the list items themselves, I styled their contents, which are each anchor tags. So the default anchor tag has
height:50px;margin-top:10px;
while the .active tag is styled
height:55px;margin-top:5px;
A less difficult problem than I imagined.