CSS display: inline-block; is usable now

just an update to an older post [webmasterworld.com], and some overdue thanks to a reader for letting me know about it :)

That code is probably one of the better CSS solutions for a gallery style layout which has multiple boxes/images of different heights and widths which need to be displayed in a fluid width layout and still wrap nicely (floats don't cut it unless all the same height!)

however at the end of that code we had decided that FF couldn't cope without a nested div with a width that matched the parent, as it would align elements inside these "boxes" horizontally instead of vertically which ruled out using the unknown width" scenario.

Thanks, to a kindly reader letting me know about another Mozilla Property : -moz-box-orient [developer.mozilla.org] it is now perfectly possible to use this code for unknown widths too.

With Opera, IE and Safari already supporting inline-block; (albeit the IE trickery is still required for <=IE7) and FF3 now offering support too the code should work fine going forward too :)

so here's the updated code, width is now optional, if you want to see what difference that

-moz-box-orient: vertical;

is making, comment out the rule and take a look in FF<3, you'll see that in the last box the text overruns and the list is aligned horizontally with the text.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Centered Inline-Blocks - Gallery Style Listing</title>
<style type="text/css" media="screen">html, body {padding: 0; margin: 0; border: 0; background: #00f;}
#container {
background: #fff;
margin: 0 150px;
border: 1px solid #f00;
padding: 5px;
text-align: center; /* IE 5.x center */
}
.box {
background: #eee;
margin: 5px;
border: 1px solid #000;
display: -moz-inline-box; /* For FF<3 */
-moz-box-orient: vertical; /* For FF<3 */
display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on block elements - see conditional below */
width: 150px; /* now optional */
vertical-align: middle; /* explicitly declare your preference as Moz inline-box auto aligns to top */
text-align: left; /* to left align text within divs when container has been set to center */
}
.box p {margin: 0.5em;}
</style>

</head>
<body>
<div id="container">
<div class="box"><p>test<br>test.</p></div>
<div class="box"><p>test</p></div>
<div class="box"><p>test</p></div>
<div class="box"><p>test.<br />test.<br>test.<br>test.<br>test.</p></div>
<div class="box"><p>test</p></div>
<div class="box"><p>test</p></div>
<div class="box"><p>test</p></div>
<div class="box"><p>test</p></div>
<div class="box">
<p>You no longer have to have the content in these boxes nested<br>inside a nested block elements with a width = to box width for FF.</p>
<ul>
<li>test list alignment</li>
<li>list alignment</li>
<li>list alignment</li>
</ul>
</div>
</div>
</body>
</html>

makes sense really, vertical/horizontal, but I hadn't known about that particular rule before kindly reader let me know.. so enjoy!

CSS display: inline-block; is usable now

and some overdue thanks..

SuzyUK

Setek

Xapti

SuzyUK

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week