The display Property Value: -moz-inline-box

The value -moz-inline-box is the Mozilla equivalent to CSS2.1’s inline-block display value. It will allow an element to generate a block box that can be flowed as a single inline box, similar to the way replaced elements, such as images, are handled. This allows the box to sit on the same line as other inline or inline-block boxes, though it will still be able to take height and width dimensions in the way that block level boxes can. (Note that Firefox version 3 has full support for inline-block.)

This facility would be useful in the case of a group of horizontal elements of varying dimensions that we wanted to center horizontally in the available width. This effect would not be possible with floated elements, which would just float to one side or the other; dimensions cannot be defined for inline elements.

The following example creates three inline-block boxes that are centered in the available width:

<!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>moz-inline-box</title>
<style type="text/css">
.outer{
  width: 500px;
  text-align: center;
  border: 1px solid #000;
  padding: 1em;
}
.box {
  display: -moz-inline-box;
  display: inline-block;
  padding: 1em;
  background-color: #ccc;
  border: 1px dotted #000;
}
#box1 {
  width: 150px;
  height: 100px;
}
#box2 {
  width: 100px;
  height: 150px;
  margin: 0 5px
}
#box3 {
  width: 75px;
  height: 75px;
}
</style>
<!--[if IE ]>
<style type="text/css">
.box {
  display: inline;
  vertical-align: top;
}
</style>
<![endif]-->
</head>
<body>
<div class="outer">
  <div id="box1" class="box">Box 1</div>
  <div id="box2" class="box">Box 2</div>
  <div id="box3" class="box">Box 3</div>
</div>
</body>
</html>

The result of this code is shown in Figure 1.

Figure 1. inline-block example An illustration showing 3 boxes in a row with different
        dimensions.
Note: inline-block in Other Browsers

The above example will work in the latest versions of Safari and Opera too, because they support the CSS2.1 display property value inline-block.

Internet Explorer for Windows versions 5 - 7 have also been catered for: we can use conditional comments to supply them with the display value inline. Without straying too far from the original topic, we can have IE can make block-level elements behave as inline-block boxes simply by setting one of the properties that trigger an element to gain a layout and then, in a separate style block, declaring the element to display inline. The element will behave in most respects as though the display value was inline-block. IE8 has full support for inline-block.

Internet Explorer for Windows only understands the display value inline-block when it’s applied to inline elements, which rather defeats the purpose in most cases. However, using the method above, we can coax IE into displaying block-level elements as inline-block boxes. The layout trigger is actually the display: inline-block; declaration, but it could equally well be any of the other properties that cause an element to gain a layout. See The Internet Explorer hasLayout Property for more information on IE and layout.

User-contributed notes

ID:
#1
Contributed:
by ikeo
Date:
Wed, 05 Dec 2007 09:08:04 GMT

This drove me nuts for months but I finally figured out how to align item displayed as -moz-inline-block
(This is invaluable in creating tables forms)
You have to use these properties

-moz-box-orient: vertical; (options are vertical | horizontal)
-moz-box-align: end; (options are start | end | center | end | baseline | stretch

You have to use the -moz-box-orient set as vertical because -moz-box-align aligns content at a 90 degree angle to the flow of said content.
So (though I've never tried it) ... if you left off the orient option ... the content would just sit at the bottom of the box.
If you didn't have a height setting, the box would be the height of the content, so it'd look like nothing was happening.

links
----
http://developer.mozilla.org/en/docs/CSS:-moz-box-orient
http://developer.mozilla.org/en/docs/CSS:-moz-box-align

Related Products