Distribute elements evenly using CSS

Question

A method to distribute elements evenly in a container using CSS appeared on Smashing Magazine today.

I recently had to use Javascript to achieve the same effect for

Answer 1

The top answer didn't work for me, and GarciaWebDev's answer won't do it for me yet because I need to support a few other browsers, including IE8.

This method worked for me. The idea is to make a containing element text-align: justify and to make the elements to distribute display: inline-block.

HTML:

    

        
Home
        
News
        
Theme
        
Activities
        
Contact
        

    

CSS:

#menu {
    text-align: justify;
}

ul {
    margin: 0;
    padding: 0;
}

#menu li {
    display: inline-block;
}

.filler {
    width: 100%;
    height: 0;
}