Horizontal menus and list items with automatic widths

Published on October 16th 2009.

Modified on April 11th 2010.

This tutorial explains how to create a horizontal menu with list items that are the same width as the text they contain. In other words: a horizontal menu that contains list items that do not have a definite width, and contract or expand to fit their contents. If you're looking for information on how to create menus whose list items do have definite widths, visit Horizontal menus and list items with definite widths.

A basic menu with no padding

Here we will construct a basic menu without using any set widths or heights, and without applying any padding to our list items.

Example

CSS Code:

            #horizMenu1 {
                list-style-type:none;
                margin:0;
                padding:0;
                background-color:#69C;
            }
            
            #horizMenu1 li {
                display:inline;	
                background-color:#66C;
                margin:0 6px 0 0;
            }

(X)HTML Code:

            <ul id="horizMenu1>
                <li>Up</li>        
                <li>Down</li>
                <li>Charm</li>
                <li>Strange</li>
                <li>Top</li>
                <li>Bottom</li>     
            </ul>

Result:

Here is our finished product. As you can see, our menu items are only as big as their contents.

The six flavours of elementary particles known as quarks.

Explanation

The display:inline on the list items creates a shrink-wrap effect, whereby the lis expand or contract to fit their contents. We then add a slight right margin to space the items out, ensuring they are easy to read, and not cramped.

Add Padding

We run into some issues when we want to add padding to our list items, because inline elements won't accept a top or bottom padding. As you can see, in the example below, the padding is applied, but it's treated by the rest of the page as if it isn't there.

What goes wrong

CSS Code:

            #horizMenu2 {
                list-style-type:none;
                margin:0;
                padding:0;
                background-color:#69C;	
            }
            
            #horizMenu2 li {
                display:inline;	
                background-color:#66C;
                margin:0 6px 0 0;	
                padding:8px;
            }

(X)HTML Code:

            <ul id="horizMenu2>
                <li>Up</li>        
                <li>Down</li>
                <li>Charm</li>
                <li>Strange</li>
                <li>Top</li>
                <li>Bottom</li>     
            </ul>

Result:

To overcome this, there are two things we can do: we can push the list items into the menu, by giving the menu a top and bottom padding or we can turn our items into block items.

The reason I haven't mentioned giving the menu a definite height is because this produces inconsistent results in various browsers (not just IE, this time!) - we're trying to compensate for the extra padding, which the page doesn't think is there. For certain browsers, the height is fine, but for others, because of discrepancies with this extra padding, the height isn't right.

Giving our menu a top and bottom padding

This method is rather tenuous because there's no strict rule for adding the padding - it's really a matter of adding enough padding until the list items fit - and you will need to adjust the padding should you decide to increase or decrease the font size.

CSS Code:

            #horizMenu3 {
                list-style-type:none;
                margin:0;
                padding:0;
                background-color:#69C;			
                padding:6px 0;
            }
            
            #horizMenu3 li {
                display:inline;	
                background-color:#66C;
                margin:0 6px 0 0;	
                padding:7px;
            }

(X)HTML Code:

            <ul id="horizMenu3>
                <li>Up</li>        
                <li>Down</li>
                <li>Charm</li>
                <li>Strange</li>
                <li>Top</li>
                <li>Bottom</li>     
            </ul>

Result:

Here, we're giving our menu a top padding, to push the list items down into the menu, and we're giving it a bottom padding to make it seem as if the menu is accommodating the list items.

I personally wouldn't recommend this option as it's too unreliable. We're literally adding a figure in for the padding which relies on the size of the list item's font, which is never a good idea, as font size can - and should be allowed to - change.

Turning our menu items into block elements

This is the most practical approach as it doesn't involve setting any definite values. We simply give our list items a display:block.

CSS Code:

            #horizMenu4 {
                list-style-type:none;
                margin:0;
                padding:0;
                background-color:#69C;	
                height:100%; /* For IE 6 */
                overflow:auto;
            }
            
            #horizMenu4 li {
                display:block;	
                width:auto;
                float:left;
                background-color:#66C;
                margin:0 6px 0 0;	
                padding:8px;
            }

(X)HTML Code:

            <ul id="horizMenu4>
                <li>Up</li>        
                <li>Down</li>
                <li>Charm</li>
                <li>Strange</li>
                <li>Top</li>
                <li>Bottom</li>     
            </ul>

Result:

This is probably the best option, if you want to add padding to your menu items, because we're leaving the calculations of the menu's height to the browser; we don't have add any shaky padding values that may vary depending on which browser we are using.

Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.

Share this:

Back to resources.