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.

Read the rest of this entry »