underline
phone number

A creative, friendly web design company based in Chelmsford, Essex

back light

Equally Spaced Divs in Your Web Design

There are several simple ways of making sure your divs are separated and spaced equally horizontally across a page. If you use a static 960px width, then you can dimly float your (set width, say 450px) left or even left and right and add padding and margins to fine tune.

But what if you have a fully fluid web design or a semi-fluid (this site uses a maximum width of 1200px and a minimum of 960px depending on browser) or maybe simply more than 2 or 3 divs that you want to show next to each other like this?

equally spaced divs css html

I scoured the net some time back to find a usable solution that DIDN’T use Javascript – no real reason, I just didn’t really see the point in bloating sites and calling Javascript for something so – in theory – basic.

The Solution
While this may look a bit like a fair bit of extra code compared to using floats, it achieves what it sets out to perfectly, without the need to get a calculator out to work out how far left and right each div should be from each other and the containing div edges. And the whole thing will resize it’s spacing depending on the width of your browser/containing div.

First of all, set up a test index,html file with a containing div that has a set width of 960px add this example code in to your editor of choice (Dreamweaver or Coda etc):

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="equal">
 <div class="words">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
 </div>

 <div class="words">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
 </div>

 <div class="words">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
 </div>

 <div class="words">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
 </div>
</div>

Now add this into your CSS file:

Select Code
1
2
3
.equal { text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; clear: both; }
.words { display: inline-block; vertical-align: top; width: 200px; border: 1px solid fuchsia;}
.stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0;}

The result should be something like the image at the top of the page. I’ve added box shadow and border radius properties to the div class “words” to enhance the effect. The crucial part is that the “stretch” span class must be within the containing “equal” div and below the divs that you want to be equally spaced – in this case the “words” divs.

The “-ms-text-justify” property should help this code to work in the ever problematic Internet Explorer 8.

Essentially, you are treating the divs as text and using the justify property to make the browser spread the divs in the same way that you would find if using “text-align: justify;” to make your words stretch evenly across the page rather than align left or right or centre (center).

If you really want to make the code as flexible as possible for responsive designs, tinker around with the “words” width and change it from a fixed width to a percentage.

It’s the order that’s important: the “equal” div must surround everything you want to horizontally align and the “stretch” span (or div class if it suits) must sit below the divs being equally spaced and within the containing “equal” div.

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , , , , , , ,


Leave a Reply

Please complete the sum so we know you\'re a human... *