Search code examples
htmlcsstext-alignjustify

text-align: justify not working

HTML

<div id="menu">
    <a href="#">Commissions</a>
    <a href="#">Business Setup</a>
    <a href="#">Administrator</a>
    <a href="#">Content Management</a>
    <a href="#">Inventory</a>
    <a href="#">Communications Tools</a>
    <a href="#">Genealogy</a>
    <a href="#">Reports</a>
</div>

CSS

#menu {
    width: 1000px;
    float: left;
    font-size: 9pt;
    text-align: justify;
}
#menu a {
    text-decoration: none;
    color: #0066cc;
    font-size: 9pt;
}
#menu a:hover {
    text-decoration: underline;
}

I want to make each links to have the whole width. I tried to implement so with text-align: justify. But it's not working. How can I do this?

Solution

  • No. All links have different length. But length between these links should be the same.

    I have only a tables solution. http://jsfiddle.net/Flack/Q7z6q/

    I know it's dirty and will be glad if someone comes with a better idea.