Question

I have the following code:

<div class='menu'>
    <div class='menu_1'>
    <a href='../test.php'>JOBS</a>
    </div>
    <div class='menu_2'>
    <a href='../test.php'>EMPLOYERS</a>
    </div>
    <div class='menu_3'>
    <a href='../test.php'>MEMBERS</a>
    </div>
    <div class='menu_4'>
    <a href='../test.php'>CONTRACTORS</a>
    </div>
    <div class='menu_5'>
    <a href=../test.php'>REMINDERS</a>
    </div>
    <div class='menu_6'>
    <a href='../test.php'>REPORTS</a>
    </div>  
    </div>

I also have the following Jquery that will dynamically size the a links based on how many items are in the menu:

$('.menu a').css('width',100/$('.menu > div').size() + '%');

This code works the way I want it to, but I was wondering if there was a way to do this using only CSS?

Any help is greatly appreciated.

Answer 1

It looks like you’re trying to get all the links on one line in a way that looks nice. The easiest way to do that is with tables, or with modern browsers, the table display types. Try this:

.menu { display: table-row; width: 100%; }
.menu > div { display: table-cell; }

You may need to add an extra div around the menu with display: table.

This won’t do exactly what the jQuery does; links with larger text will take up more space. This is arguably better behavior as long as the table stretching algorithm is working OK.