A cross-browser method using semantic markup and CSS to align list items horizontally and space them evenly so they are distributed across the full available width. Useful for laying out lists of thumbnail images or navigation links for example.
Tested in IE6, IE7, IE8, FF, Safari, Chrome
Fixed Width Content Using This Method:
Variable Width Content:
HTML:
<ul class="block-list">
<li>Content</li>
<li>Content</li>
<li>Content</li></ul>
CSS:
/* set base font-size (customize to suit) */
body, .block-list li {font-size: 12px;}
/* trigger hasLayout in IE */
.block-list, .block-list li {zoom: 1;}
.block-list {
font-size: 0 !important; /* remove physical spaces between items */
text-align: justify;
text-justify: distribute-all-lines; /* distribute items in IE */
list-style-type: none;
margin: 0;
padding: 0;
}
/* fully justify all items in browsers other than IE */
.block-list:after {
content: "";
display: inline-block;
width: 100%;
}
.block-list li {
text-align: left; /* customize to suit */
vertical-align: top; /* can customize to suit */
display: inline-block;
width: 31.3%; /* optional, only need for text content to wrap */
margin-bottom: 1em; /* optional, customize to suit */
}
/* IE hacks to make li's line up */
*+html .block-list li {display: inline;}
* html .block-list li {display: inline;}
IMPORTANT:
There must be no space between the last li tag and the closing ul tag in your HTML markup. This is to fix a bug in Safari so it won’t add extra space after the last list item.
CSS Web Design 
SelenIT
/ December 12, 2011The Safari issue about white space between last LI ending tag and UL ending tag seems to be even more unusual. With no space, it doesn’t add extra space at the line end, with one space or new line character, it adds it, but if there are both new line and ordinary space (no matter if the space is before new line or after it) the bug goes away again.
kristinlbradley
/ December 13, 2011That’s very interesting, thanks for the additional information. Will have to try experimenting a bit more.
Vincent
/ February 16, 2012Yea, vry great solution, it’s help me, thank’s a lot 😉
Victor Engmark
/ February 22, 2012Excellent stuff, but there’s another issue: Consecutive elements *without whitespace between them* are treated like a single element. For example, if you have three divs with no space between them, they will all bunch up. If you add a space between two of them, the ones on the left and on the right of the space character will be distributed left and right. If you add another space character between the second pair of divs they will all distribute properly
Found in Firefox 10.0.2
Victor Engmark
/ February 22, 2012This is of course because of text-align, which can only work with whitespace-separated elements.
kristinlbradley
/ February 22, 2012Well yes.
kristinlbradley
/ February 22, 2012This is only an issue if for some reason you write your code without any whitespace between the elements or if you use some type of templating system or compression that removes all whitespace between your HTML elements.
Victor Engmark
/ February 22, 2012Bingo – DataTables. And there’s no documented way to change it. But at least the first workaround (`width: (100%/$N)`, `display: inline-block` and `text-align`) worked perfectly.
kristinlbradley
/ February 23, 2012Hmm, there’s no way you could somehow append an empty space between elements?
Victor Engmark
/ February 24, 2012None that I know of, but maybe someone here – http://stackoverflow.com/questions/9409681/how-to-add-space-between-divs-in-datatables – will be able to answer
kristinlbradley
/ February 28, 2012Thanks for posting the link to my blog post as an example. Hopefully someone has a solution.
Victor Engmark
/ February 24, 2012Turns out that `line-height: 0;` gets rid of the extra bottom padding.
kristinlbradley
/ February 28, 2012My example CSS code above includes an optional bottom margin so you should be able to just remove that line. (margin-bottom: 1em;)
Victor Engmark
/ February 28, 2012That didn’t work on my Firefox 10.0.2 – I had to add that extra line to make it a single line.
xazosxazos
/ October 11, 2012Well done. Works perfect for all modern browsers.
Thank you.
kristinlbradley
/ October 12, 2012Thanks! Glad you found it useful.
zsmicrotech
/ December 14, 2012Thanks you, helpful CSS and HTML coding
http://yahoo.com
/ February 10, 2013I actually had to discuss this unique post, “Cross-browser CSS:
Justified Block List CSS Web Design” along with my best buddies on facebook
.com. Isimply desired to distributed your wonderful posting!
Regards, Ruby
kristinlbradley
/ February 10, 2013Thanks Ruby. Glad you liked it. 🙂