Golden Apple Web & Design

Freelance Web Development, Graphic Design & Layouts, Wordpress Specialization

Home 9 CSS 9 CSS: Equally Spaced Horizontal Elements

CSS: Equally Spaced Horizontal Elements

by | CSS, Design | 3 comments

Sometimes there are things you want to do in your layouts with CSS (Cascading Style Sheets) that you assume would be easy, but as you dive into the coding, it turns out what you thought should work just isn’t cutting it. Equally spacing elements across a horizontal area so that the first and last items are flush with the left and right borders respectively turns out to be a perfect example of this. For the lowdown on how to best accomplish this, read on!

Why Isn’t This Working?!?!

Here’s the issue I found myself running into on more than one occasion:

I need to display an array of items, such as in a catalog or members directory, and I want to span them horizontally across the available space. My knee-jerk reaction always seems to be to float each element’s container. Now for some applications this is fine, but when it comes down to pixel perfect layout mo-jo, it has a few downsides:

  1. If the elements are not all of equal height (as is often the case with dynamic content), then odd “stacking” will eventual happen on multiple rows, when an item in the previous line has more height then other items in the same row, and the next row can’t slide all the way over to the left.
  2. Even if we programmatically add in a clearing element after the last item in a row or force a conformed height to all elements, we have to accept that the last item won’t arrive flush to the right border of the containing element because of the right margin applied to the elements to space them apart. (We could change the right border on the last item of every row, but then we still have to deal with responsive widths… another can of worms!)

At first glance it seems like there should be an easy way to just apply percentage based widths and border to our elements and be done with it, but as we soon discover… using floats just doesn’t give us that perfect spread from left to right with our elements flush to the parent element’s borders.

Aha!!! It’s So Simple!

So what’s the solution?? It’s a thing of facepalm inducing simplicity. Instead of using float:left;, we simply give the parent container the text-align:justified; CSS rule and the elements themselves the display:inline-block; rule, along with a little trick that ensures that the justification works even on a single row.

Yep, that’s it. Have a look:

<ul id="parent">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
  <li>element 4</li>
</ul>
#parent {
  text-align: justify;
  font-size: 0.1px; /* IE 9/10 fix */
}
#parent li {
  display: inline-block;
}
#parent:after {
  content: '';
  width: 100%; /* Ensures justification for single lines */
  display: inline-block;
}

Thanks to Chris Again!

Once again a great solution came from a great CSS techniques source, Chris Coyer. Kudos to you Chris, and Happy coding!

3 Comments

  1. Chris

    Works perfectly! Thanks

    Reply
  2. Josh

    This is quite nice and almost achieves what I want, but I was looking for an equal spacing (eg margins) between each element AND between the elements and the edge of the parent.

    So if the li was 30px wide and the #parent was 100px, you could fit up to 3 abreast, meaning the remaining 10px should be split equally 4 ways:
    – 2.5px on the left of the first element
    – 2.5px between element 1 and 2
    – 2.5px between element 2 and 3
    – 2.5px on the right of the third element

    Justification means the right and left elements are always on the edges and the remainder of the space is split only BETWEEN elements.

    Reply
  3. Ary curve

    i m try this script and this Work, thanks

    Reply

Leave a Reply to Ary curve Cancel reply

Your email address will not be published.