CSS Justify width of 5 links in 412px

Question

I want to have five inline links with an approximate padding of :5px 8px 5px 8px; and fixed margin of :0px 2px 0px 2px; evenly distributed inline within a 412px width div

here is an example: http://www.branklin.com/questions/css_justified_links.php

Answer 1

This is the closest I could get it... You need to add another div around the links, or they can't have padding/margins at the same time as being relatively sized. Unless your padding and margins are also relative %.

.section_left div {float:left;width:20%;}
.section_left a:link, .section_left a:visited { 
    display:block;margin:4px 0 0 2px;padding:5px 8px 5px 8px;
    text-decoration:none;background-color:#e6e6e6;color:#666;
    font-size:18px;font-family:Helvetica; }

<div><a href="#">..</a></div> # do this for each link

What happens here is that the display:block; inside the a-tag causes it to automatically fill the parent tag, so no width is needed, and the padding and margins are automatically adjusted for. Note that the float:left; is moved to the divs.

The alternative is of course to set a fixed width to the links, taking into account the padding and margins and the max width, but you'd end up with a floating point pixel value, which isn't so nice.

Answer 2

the easiest way to do it with display property (table, table-row and table-cell).

example:

css:

div#links {
    display: table;
    width: 412px;
    border: dotted 1px gray;
}
div#links ul {
    display: table-row;
    margin: 0;
    padding: 0;
    list-style: none;
}
div#links ul li {
    display: table-cell;
    text-align: center;
}
div#links ul li a {
    padding: 5px 8px;
    background-color: gray;
    color: white;
}

and the html:

<div id="links">
  <ul>
    <li><a href="#">Daily</a></li>
    <li><a href="#">Weekly</a></li>
    <li><a href="#">Monthly</a></li>
    <li><a href="#">Quarterly</a></li>
    <li><a href="#">Yearly</a></li>
  </ul>
</div>