Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Preventing "Stepdown"

DZone's Guide to

Preventing "Stepdown"

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

[img_assist|nid=816|title=|desc=|link=none|align=left|width=425|height=105]


If you are familiar with the concepts of "floats", you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have you ever seen your floated elements "stepdown"?


This is a fairly common problem you can run into when creating a horizontal menu. Like most menus, you create an unordered list:


<ul id="menu">
	<li><a href="#">My</a></li>
	<li><a href="#">Little</a></li>
	<li><a href="#">Menu</a></li>
</ul>



You want the menu items to be large clickable blocks, so you write CSS like this:


ul#menu li a {
	display: block;
	width: 130px;
	text-align: center;
	font-weight: bold;
	float: left;
	color: white;
	font-size: 1.2em;
	text-decoration: none;
	background: #600;
}



Those blocks are floated the left, so they should all line up in a row, right? Nope, that's gonna get you some stepdown action. The problem is the list elements wrapping the anchor elements. These are also block-level elements but they are not floated. This confuses things, because block elements naturally have a break after them (like an invisible <br />). That pushes the next one down whatever the current line-height is, which is what causes the stepdown.


Here is the remedy:


ul#menu li {
	display: inline; /* Prevents "stepdown" */
}



Setting those list elements as inline will take away those breaks and make sure your menu stays nice, happy, and straight!

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}