Distribute Elements Evenly Using Css

A method to distribute elements evenly in a container using CSS appeared on Smashing Magazine today. I recently had to use Javascript to achieve the same effect for elements of var

Solution 1:

Of course this is exactly what the table element is for. It's sad and hilarious at the same time to see people twist themselves into a gordian knot with CSS, most of them not even knowing why they're avoiding tables.

Whatever reason you might have dreamed up to reject tables, it can't possibly be worse than depending on Javascript to layout your page.

Yes, I know this is not the answer you were looking for, but golly, it's so obvious.

Solution 2:

There have been casual claims that tables are the obvious solution, however, there hasn't been any real discussion of how to implement it. I'll show you that displaying divs as a table is the right way to do this, but it is not as easy as centering all of the cells and setting an automatic width. The problem with this is that you have no control of the outer margins of the further-most left and right cell-contents. They both are inset from its containing box an arbitrary amount you cannot control. Here's a work around:

First, a slight modification of Guder's html:

<divid="menu"><ul><liclass="left"><ahref="/">Home</a></li><li><ahref="/news">News</a></li><li><ahref="/theme">Theme</a></li><li><ahref="/activities">Activities</a></li><li><ahref="/contact">Contact</a></li></ul></div>

Now the css:

#menu {display:table; width:// some width in px //}
#menuul {display:table-row; width: 100%}
#menuli.left {display: table-cell; text-align: left; width: 20px; white-space:nowrap;}
#menuli {display: table-cell; text-align: right; width: auto;}

Now, we have full control of the outer-most sides of the menu, which align with the far-left and far-right sides of the containing box, and the distance between each element is consistent. You'll notice that I used a trick to get the furthest left cell to be the exact-width of it's content. I set the width property to a small size obviously below what its contents would normally be. I then set the white-space to no-wrap, which stretches the cell the least amount to fit the text of the cell. You can see here an image which shows the effect of this (using different html elements):

The beauty of this code is that it can accept however many cells and text-widths, without any knowledge of their actual widths, and distribute them evenly across the page. All the while, left and right elements reaching their perimeters, and ofcourse we have all our html in divs, no browser or internet geek is mislead to believe we're presenting tabular data. No known compromises here!

Solution 3:

This is what display:table-cell is supposed to achieve - however, the IE's just don't do it, and FF<3 has problems with it too, I believe.

These styles work in FF3, Chrome, Safari, and (I think) Opera 9:

#menuul {display:table;padding:0;}
#menuli {display:table-cell;text-align:center;}

But you'll need a fair few hacks to get them working in the usual, commercial set of browsers.

Solution 4:

Even though Colin Brogan's answer provides solid foundation to approach a "almost there" resolution to the problem, it still depends on text length. If text is too long, the "cell" will be wider and thus have more space on the left. I tried to address the problem based on the code presented in his answer, but I concluded that the problem has not a real possible solution with tables or fake-tables (display:table-cell).

So we'll have to wait for CSS3 flexible box model to be more widely supported (you can check updated support here). In the meantime, you can use the Flexie polyfill to patch browsers that don't support it. If you want to check how it'll look like on WebKit now (without needing polyfill), you can try the following CSS:

#menuul {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: justify;
  width: 940px;
  list-style: none;
  padding: 0;
  border: 1px solid gray;
}
#menuli {
  border: 1px solid silver;
}

Notice it only uses WebKit prefixes. You should add prefixes for the other browsers aswell if you decide to take it to production website.

This approach does accept an unknown amount of items and text-widths, without any knowledge of their actual widths, and distribute them evenly across their container (in this case, #menu ul).

If you decide to be conservative, the approach suggested by Colin Brogan is the most acceptable given that you keep your texts on the same approximately length. If not, wider spaces will start to show.

Solution 5:

Yes, you can do it, as long as the widths of the elements to be distributed are known in advance. But it's a bit messy.

The trick is, you want a spacing between each element of ‘(Wp-sum(Wc))/(Nc-1)’, that is width of the parent element minus the total width of all the child elements, divided equally between the number of gaps between the elements.

Because CSS doesn't have the ability to do expressions, we have to hack it a bit. First we add a margin to the parent element of the size ‘sum(Wc)’, the total width of all child elements. So now the parent has width ‘(Wp-sum(Wc))’, and we can use a padding value in % relative to that width.

So for example, for four images of sizes 10px, 20px, 40px and 80px respectively, our ‘sum(Wc)’ is 150px. Set that as the parent margin, then the children can have one-third of that width as padding between them.

<styletype="text/css">#nava { width: 10px; height: 20px;}
    #navb { width: 20px; height: 20px;}
    #navc { width: 40px; height: 20px;}
    #navd { width: 80px; height: 20px;}

    #nav { margin-right: 150px; white-space: nowrap; }
    #nava, #navb, #navc { padding-right: 33.3%; }
</style><divid="nav"
    ><imgid="nava"src="nava.png"alt="a"
    ><imgid="navb"src="navb.png"alt="b"
    ><imgid="navc"src="navc.png"alt="c"
    ><imgid="navd"src="navd.png"alt="d"
></div>

The funny tag indentation is to avoid there being any whitespace between images. ‘nowrap’ is necessary because with the parent width set narrower than the page width, it wouldn't otherwise be possible to fit all the elements on the row. Finally, in IE you may need to add a wrapper div around the lot with ‘width: 100%; overflow: hidden’ to prevent unwanted scrollbars if you're spanning the whole page. And certainly you'll want to be in Standards Mode.

This can work with textual elements too, if you make them inline blocks so you can add padding, and you size them explicitly in ems. It won't work if the sizes of the child elements are not known in advance (eg. they contain dynamic content), as you won't know the ‘sum(Wc)’ value to use.

To be honest I would probably just use a table. The table layout algorithm copes very smoothly with calculating how to distribute spare table width. (Use ‘table-layout: fixed’ for best results with known-width cells, or ‘auto’ to respond to dynamic contents.) This way you also don't have to worry about pixel rounding errors.