Simple Left Floated Horizontal Menu

Often, when you are creating websites, you want to make certain elements to line up side-by-side, or you want them to stack on top of each other. When you have block level elements of the same height, a good CSS property to use is display.

<body>  
<ul id="menu">  
   <li>Home</li>
   <li>About</li>
   <li>My Work</li>
   <li>Contact</li>
</ul>  
</body>  
</html>  

Vertical

Display controls how your elements are displayed. There are many options, but two of the most common options are block, and in-line block. Block will allow them to stack vertically on top of one another.

#menu li {
    display:block;
}

Horizontal

In-line block is just as it sounds, and your selected elements will be arranged in line with one another, forming a horizontal row.

#menu li {
    display:inline-block;
}

The reason that I mentioned height earlier is that if you have more than enough elements to fit into a row and a second or third row is needed, the elements should be the same height. Otherwise, your rows won't be straight, and depending on your layout, it can ruin the layout and it's structure, throwing certain elements off from where they should be.

The difference between the display and float properties are that display won't allow your text to overlap each other, but the float property will.