CODEWITHSUNDEEP
csscss-floathtml-listsvertical-alignment
EB Mudd
EB Mudd

Reputation: 193

CSS vertically align floated <li>

I want to have a left-aligned navigation bar across the top of the page, but before (i.e. to the left of) the menu items, I would like a bit of text ("John Doe") that (i) has a substantially larger font size than the menu items but (ii) has the same baseline as the menu items.

From what I understand, the preferred/recommended way to do navigation bars is with floated <li>'s. However, I haven't found a way to use a left floated list and also have the menus align to the same baseline as the text to the left. My current CSS and HTML are:

<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>

<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>

Is there any way to vertically align all left floated <li>'s to the bottom of the container <div>?

I should say: I can easily achieve the intended effect by using a table instead of a floated list (using vertical-align:bottom on the menu <td>'s), but since floated lists seem to be the recommended standard, I'd like to know if it's possible with them. (Though I really don't understand the animus folks seem to have against using tables for layout.)

Upvotes: 0

Views: 4023

Answers (1)

Atrum
Atrum

Reputation: 76

Don't need to use float, in fact it's better if you don't, you can just set the display type to a table-cell

#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}

#nav {
list-style:none;
margin:0;
padding:0;
}

#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}

#nav li#name {
font-size:40px;
width:250px;
}

also, the extra border style was unnecessary, just change the selectors to #nav li and #nav li#name and you can supersede anything in #nav li with what's in #nav li#name because it has higher priority.

tables are bad mostly because of the way they load, as far as I understand they require the whole table to build before content can load, while using individual elements can load as they please, or something to that affect, i'm sure someone else could explain that part better.

Upvotes: 1

Related Questions