An inline box is a dom element that is laid out inline, like span tag, but has a defined height and width like a positioned div or image. Actually, the img tag is a fair example of how an inline box should be have. So if you can imaging a block level container tag that has all the layout behavior of an image then you have a good idea of how an inline box behaves.

I worked on a photo album project where I needed something like an inline box. I wanted a square container that could take a border, that could hold a smaller image centered within it, and that could be aligned left, right or center in the normal inline flow of the page. Something that I could layout in a grid that would grow or shrink as the width of the browser was changed. The problem I faced at the time was only IE 7 supported the css display:inline-box; rule. Shocking… isn’t it.

So, I fussed with various methods of faking an inline box. The solution I came up takes a lot of mark up to work. Instead of faking an inline box, it piggy-backs on a transparent gif. If someone has a simpler method I’d love to hear about it.

The final mark up looks like this:

.photo_frame .wrapper {
    position:relative;
    line-height:1px; /*layout*/
    font-size:1px; /*layout*/
    vertical-align:top; /* fixes top align for opera and ff */
}
.photo_frame .outer_pos {
    position:absolute;
    top:0px;
    left:0px;
}
.photo_frame .inner_pos {
    display:table;
    float:left;
    position:relative;
    text-align:center;
/*      height:100px;
    width:100px;*/ /* height and width must be set according to the image being shown */
}
.photo_frame .img_holder {
    width:100%;
    top:50%;
    text-align:center;
    position:static;
    position:expression('relative') !important;/*hack for IE7 */
    display:table-cell;
    vertical-align:middle;
}
.photo_frame .img_holder .anchor {
    cursor:pointer;
    display:block;
    top:-50%;
    position:static;
    position: expression('relative') !important; /*hack for ie7 */
}
.photo_frame .clear_holder img {
/* height:100px;
    width:100px;*/ /* height and width must be set according to the image being shown */
/* margin-right:50px;
    margin-bottom:50px;*/ /* margin must be set for appropriate spacing */
    margin-bottom:10px;
}
.photo_frame .clear_holder {
    line-height:1px;/* layout */
    font-size:1px; /* layout */
    vertical-align:text-bottom;
}
.photo_frame .box_border {
/* border:3px solid #fff;*/ /* borders should only be set here */
}

<span class="photo_frame"> <!-- root element -->
    <nobr><!-- cant do this with css cos Opera doesn't play nice -->
       <span class="wrapper"> <!-- safari needs the non breaking space or it gets confused -->
            <div class="outer_pos">
                <div class="inner_pos">
                    <div class="img_holder">
                        <span class="anchor"><img src="path/image.jpg"></span>
                    </div>
                </div>
            </div>
        </span>
        <span class="clear_holder"><!-- fixes opera's box model -->
            <img class="box_border" src="clear.gif" /? <!-- gives height to firefox, margins should only be set here -->
        </span>
    </nobr>
</span>

Quite a bit there, eh? So lets deconstruct each piece of the puzzle.

Starting with a span

The span tag is the container for everything else. Its the root node for the rest of the mark up that makes the inline box work. The class attribute has no corresponding css defined however a left margin may be applied for layout. Otherwise its there just to define the scope for the rest of the css.

The nobr tag

Inside the span we define two more spans, one, that will hold the markup that displays and centers an image, the other holds the transparent gif that will define the vertical width and height for the box in Firefox. These two tags are wrapped inside a nobr tag. A nobr tag is used instead of the corresponding css rule because of Opera. Without it, the two inner spans do not line up correctly, and Opera does not correctly respect the css in this instance.

The wrapper

The first span inside the nobr is used as a wrapper for the centered image. The css for its class makes it relatively positioned, top aligned and give it a line-height and font-size of 1 pixel. The span is set to position:relative for the sake of its child nodes. It contains an absolutely positioned div, whos top and left position will be relative to the span. The vertical alignment, line-height and font-size are set so that all browsers will render the space the span takes up identically.

The very first child of the wrapper is a non breaking space. This exists solely for the sake of Safari so that it doesn’t bump the next div down a line.

The outer div

The wrappers first child node is an absolutely positioned div with a top and left of zero. Since its parent node, the wrapper is relatively positioned, the outer div is rendered at the upper left corner of the wrapper.

The inner div and image holder div

The inner div and image holder div work together to provide a table cell like rendering. Table rendering is used for browsers that support it (all but IE). For IE an IE only expression is used which is ignored by other browsers. The image holder has a top margin of 50 percent. This pushes the top of the image to the center of the image holder.

The anchor span and the image

The anchor span completes the centering of the image inside the div along with another expression hack for IE.

The transparent gif holder

To finalize the layout across browsers, we need a transparent gif to get the correct height in Firefox. The second child of the nobr tag is another span with its font-size and line-height set to one pixel. However in his case its aligned bottom. This combination is to fix the layout in Opera so that the transparent gif lines up correctly.

The transparent gif

The last piece of the puzzle is the transparent gif. Its height and width must be correctly set. A border can be applied to the gif as well as a top, right, and bottom margins for layout purposes. A left margin should be applied to the root span, not the transparent gif.

With all that said

This solution worked for me for the particular problem I wanted to solve. Obviously since the size of the image has to be known in advance this is can be inconvenient when you need to display a variety of different sized images. You’re mileage may vary.

•