How to distribute text links horizontally?

On a web site I’m designing I have a fixed-width space (of about 600px) in which I would like to distribute a few text links evenly so that the first link is aligned to the left of the space while the right one to the right and the spaces between the links are equal. Someone described it here but no one posted a solution. Here is the quote:


I want to achieve this:

+------------------------------------------------------------+
|MENU ITEM1       MENU ITEM2       MENU ITEM3      MENU ITEM4|
+------------------------------------------------------------+

- Menu items are evenly distributed horizontally (equal size
  whitespace in between items)
- First item and last item should be left-aligned and right-
  aligned respectively within the menu width (touch the
  edges of the available space)
- Menu items are text links, not images
- Menu items can consist of 1, 2 or 3 words
- The menu width is fixed, but I would like to use relative
  font units to allow text resizing

I have read somewhere that this is not possible without javascript but perhaps a solution has been found?

I have read somewhere that this is not possible without javascript but perhaps a solution has been found?

We can do the impossible on this forum :slight_smile:

Have a look at test 2 in the CSS quiz which shows just how to do that.

The solution and explanation is in post #40 but the code is reproduced below.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Distributed Horizontal Menu</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
.nav {
    margin:auto;
    border:3px outset #66f;
    padding:0;
    min-width:42em;
    width:95&#37;;
    height:44px;
    overflow:hidden;
    background:#039;
    text-align:justify;
    font:bold 88%/1.1 verdana;
}
.nav li {
    display:inline;
    list-style:none;
}
.nav li.last {
    margin-right:100%;
}
.nav li a {
    display:inline-block;
    padding:13px 4px 0;
    height:31px;
    color:#ddd;
    vertical-align:middle;
    text-decoration:none;
    text-transform:capitalize;
}
.nav li a:hover {
    margin:-3px;
    border:3px inset #66f;
    color:#ff6;
    background:#36c;
}
</style></head><body>

<ul class="nav">
<!--[test to comment out random items]
    <li>&nbsp; <a href="#">netscape&nbsp;9</a></li>
[the spacing should be distributed]-->
    <li>&nbsp; <a href="#">internet&nbsp;explorer&nbsp;6-8</a></li>
    <li>&nbsp; <a href="#">opera&nbsp;10</a></li>
    <li>&nbsp; <a href="#">firefox&nbsp;3</a></li>
    <li>&nbsp; <a href="#">safari&nbsp;4</a></li>
    <li class="last">&nbsp; <a href="#">chrome&nbsp;2</a> &nbsp; &nbsp;</li>
</ul>

</body></html>

To move the first and last closer to the edge then you need these small adkustments:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Distributed Horizontal Menu</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
.nav {
    margin:auto;
    border:3px outset #66f;
    padding:0;
    min-width:42em;
    width:95%;
    height:44px;
    overflow:hidden;
    background:#039;
    text-align:justify;
    font:bold 88%/1.1 verdana;
}
.nav li {
    display:inline;
    list-style:none;
}
.nav li.last {
    margin-right:100%;
}
.nav li a {
    display:inline-block;
    padding:13px 4px 0;
    height:31px;
    color:#ddd;
    vertical-align:middle;
    text-decoration:none;
    text-transform:capitalize;
}
.nav li a:hover {
    margin:-3px;
    border:3px inset #66f;
    color:#ff6;
    background:#36c;
}
</style></head><body>

<ul class="nav">
<!--[test to comment out random items]
    <li>&nbsp; <a href="#">netscape&nbsp;9</a></li>
[the spacing should be distributed]-->
    <li> <a href="#">internet&nbsp;explorer&nbsp;6-8</a></li>
    <li>&nbsp; <a href="#">opera&nbsp;10</a></li>
    <li>&nbsp; <a href="#">firefox&nbsp;3</a></li>
    <li>&nbsp; <a href="#">safari&nbsp;4</a></li>
    <li class="last">&nbsp; <a href="#">chrome&nbsp;2</a> &nbsp;</li>
</ul>

</body></html>

Note that the non-breaking spaces are important so refer to the explanations in the quiz.

That’s about as close as you can get for all browsers but if you read the quiz there are a couple of versions form modern browsers only using display:table.

I could add that it is only the last “space” + “non-breaking space” that is necessary in your case.

If you use more than one word inside the links, they must have non-breaking spaces that does not expand.

Thank Erik for the code as it was his idea :slight_smile:

Thanks a lot for the tips! Too bad css still needs workaround for this but at least it’s good that a solution exists.