Cross-browser CSS: Justified Block List

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.

About these ads
Leave a comment

19 Comments

  1. SelenIT

     /  December 12, 2011

    The 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.

    Reply
  2. Yea, vry great solution, it’s help me, thank’s a lot ;-)

    Reply
  3. Excellent 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

    Reply
  4. Turns out that `line-height: 0;` gets rid of the extra bottom padding.

    Reply
  5. Well done. Works perfect for all modern browsers.
    Thank you.

    Reply
  6. Thanks you, helpful CSS and HTML coding

    Reply
  7. I 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

    Reply

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.