Equidistant objects with css - another way

I recently read an article about the equidistant spacing of elements with css over at css-tricks.com. The simplicity of the technique really struck me as a case of good old lateral thinking. Despite this I was a little uncomfortable with the extra html that was required to make the technique work.

Inspired by the css-tricks.com solution I decided to try and solve the same problem with out the need for the extra div’s.

Admittedly, the solution I came up with isn’t quite as clean as the one proposed by Chris Coyier but never the less I feel compelled to share it.

Here’s an example

It’s all about lists

firstly, here’s the basic html…

<ul class="equal">
<li class="n1" ><a href="thelink">the first item</a></li>
<li class="n2" ><a href="thelink">Another item </a></li>
<li class="n3" ><a href="thelink">A piece of link text </a></li>
<li class="n4" ><a href="thelink">this also goes somewhere </a></li>
</ul>

That’s right, just good old lists with classes to allow us the differentiate between them.

The css

Firstly, all the list items need to be floated, The floats need to be contained within their parent ul and for simplicity I’ve added a rough and ready css-reset to remove any margins and padding and to remove the default bullets

ul.equal {
padding-left:9em;
height:auto;
zoom:1;/* just for ie - put it in ie only style sheet*/
}
.equal:after{content:".";clear:both;visibility:hidden;height:0px;display:block}
* { margin: 0px;
padding: 0px;
list-style: none outside;
}
.equal li {
min-width:9em;
float:left;
}

The trick, as with Chris Coyier’s solution, the trick is to get three of the four items to each take up a third of the overall width. the trick with this technique is to offset the 1st item using a negative margin and use a padding on the containing ul to prevent anything from droping behind it. You’re now left with a ul which has a width which can be divided into thirds.

.n1{margin-left:-9em;display:inline;/*fix ie6 double margin float bug*/}
.n2,.n3,.n4{width:33.3%!important;text-align:right;width:33.2%;}/*ie6 causes problems due to rounding-up so use a slightly smaller percentage for it.

after the we’ve got the floated <li>’s nicely expanding we need to make sure the last three are right-aligned in their respected <li>

.equal a {
background: #fff;
height: 9em;
display:block;
margin:0 0 0 auto;/*right aligns a block element in the good browsers*/
width: 9em;
text-align:center;/*to override the text-align required for ie6 for the parent li*/
}
.equal .n1 a {margin:0;}

In the good browsers you can use a min-width to prevent the boxes dropping down onto multiple lines.

As with most layout techniques… IE 6 has to be coaxed into behaving how would like. The code required to do this would normally be put in a stylesheet of it’s own using conditional comments but for the purposes of simplicity i’ve used a couple of hacks to keep everything in one file.

4 Responses to “Equidistant objects with css - another way”

  1. Thierry Says:

    Very nice, but I’d use “overflow:hidden” on the UL rather than the “clearFix” method.
    See: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp

  2. admin Says:

    Thanks for the comment Thierry. I wasn’t aware of your (or Paul O’brien’s ) method of containing floats. In the past I have used overflow:auto which on the surface solved the problem but I found it did create scrollbars in some situations. I’ll be sure to take a look at your method though.

  3. lbt Says:

    You can also do:
    .n1{margin-left:-6em;display:inline;/*just to fix ie6*/}

    .n2of4,.n3of4,.n4of4{width:33.3%!important;text-align:right;width:33.2%;}

    .n2of5,.n3of5,.n4of5,.n5of5{width:20%!important;text-align:right;width:20%;}

    .n2of6,.n3of6,.n4of6,.n5of6,.n6of6{width:16.66%!important;text-align:right;width:16.5%;}

    etc

  4. admin Says:

    lbt - took me a moment to work out what you were proposing but looks like it would be a good way of making it more modular… Thanks for the suggestion.

Leave a Reply