Horizontal navigation: flush left / right

Hello,

I have a list of nav items. I’d like the first item to touch the left border of te box, and the last item to touch the right border of the box, with equivalent space between each element.

I’ve tried with floats, with auto margins and the likes, but couldn’t come up with a decent solution.

How would approach that issue?

Regards,

-jj. :slight_smile:

Hi,

It’s a common question and one that css has no answer for and even tables can’t do exactly what you want although they can evenly space items across a width.

You can do it by brute force by applying the exact widths and margins to each element to place it where you want but you can’t do it automatically.

The nearest you can get is using the display:table properties for IE8+ and the just removing the margin form the first and last as follows.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul#demo {
    width:1000px;
    display:table;
    margin:0 auto;
    padding:10px 0;
    list-style:none;
    background:red;
}
#demo li {
    display:table-cell;
    vertical-align:top;
    padding:0 10px;
}
#demo a {
    padding:0 5px;
    display:block;
    position:relative;
    z-index:1;
    color:#fff;
    text-decoration:none;
    background:green;
    font-size:120%;
}
#demo li.first{padding-left:0}
#demo li.last {padding-right:0}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#demo{text-align:center;}
#demo li{display:inline;padding:0;margin:0}
#demo a{
    display:inline-block;
    margin:0 10px;
}
</style>
<![endif]-->

</head>
<body>
<ul id="demo">
    <li class="first"><a href="#">This is the title</a></li>
    <li><a href="#">A title</a></li>
    <li><a href="#">This is the title</a> </li>
    <li><a href="#">This is another longer title</a></li>
    <li><a href="#">Title</a></li>
    <li class="last"><a href="#">This is the title</a></li>
</ul>
</body>
</html>


Ie6 and 7 just get a centred nav instead.

Erik J did show another method in a previous css quiz for an equal distribution but unless you understand how it works you will have trouble modifying it.

Thank you so much Paul. You’ve been very helpful (in all the threads I’ve started lately).

Best.