CSS Quick Tip: Inline Boxes with Bottom Alignment
By Thierry KoblentzNovember 15th, 2010
The challenge
Keeping a submit button at the bottom of a line box, aligned with form controls positioned below their label (Figure 1).
The tricky part
If the containing block is not wide enough for the submit button to flow next to the other controls, that button must show at the beginning of the next line box (according to RTL/LTR context) with minimal space above it (Figure 2).
The solution
display:inline-block allow us to keep everything in the flow and at the bottom of the line box. This is because inline-block generates a block box (see 9.2.4 The ‘display’ property), which itself is flowed as a single inline box, similar to a replaced element (i.e. an image).
The Markup
We group label and control pairs inside divs.
<form> <div> <label></label> <select></select> </div> <div> <label></label> <select></select> </div> <div> <label></label> <select></select> </div> <div> <input /> </div> </form>
The CSS
label {display:block;}
div {
display:inline-block;
margin:0 10px 10px 0;
*display:inline;
zoom:1;
}
To position the controls below their associated label, we style the labels with display:block (without this, these elements would show side-by-side).
Note that styling the labels as block does not make them expand across the form, but only across their parent boxes – which share the same line box. This is because the inside of an inline-block is formatted as a block box, and the box itself is formatted as an inline box.
The two last rules are for IE 6 and 7 which do not support inline-block. For these browsers, we need to style the divs as inline and use zoom. Note that this hack is not as robust as the real thing because a nested (non replaced) element with a layout will break everything, sitting on its own line inside the form. So, unless you plan to give such nested elements a width, do not give them a layout.
November 16, 2010 at 7:30 am
Good ole ie6 and 7
November 16, 2010 at 12:01 pm
Are you sure that inline-block is not supported at all IE6? Perhaps display: inline-block mode is not *fully* supported in IE6.
I remember after three years at a web company writing IE6 compatible sites day in day out, I reconsidered this often overlooked display mode. I had assumed for a long time that it wouldn’t work, but it did. I had these buttons that I refined over time which can have variable length text in it, with the usual rounded corner background images an all. I converted them to inline-block and found they worked just fine in IE6, so that helped reduce the CSS a little bit. One very nice side effect was that the buttons would no longer break when the button is crammed in a small table cell; something I couldn’t solve with my previous inline + line-height buttons (these were truly flexible buttons for enterprise like websites, which didn’t use float and block mode, but could have the background images, with the rounded sides and hover image etc).
November 16, 2010 at 12:40 pm
Ah, quirksmode says inline-block support on IE6/7 is only for “natural” inline elements. That explains why my inline-block buttons worked in IE6 (they were made of A > SPAN).
In the FORM example above I suspect switching the DIVs to SPANs would make it work in IE6; but then it probably doesn’t matter ;-)
November 16, 2010 at 3:22 pm
@Fabrice
This is because display:inline-block gives elements a layout.
As a side note, this value can be used as a layout switch. For example:
a {display:inline-block;}
a {display:inline;}
The above will give the As a layout (in IE).
Note that this would not work if both declarations were used in the same rule.
November 16, 2010 at 9:33 pm
The tricky part If the containing block is not wide enough for the submit button to flow next to the other controls, that button must show at the beginning of the next line box (according to RTL / LTR context) with minimal space above it (Figure 2). The solution display:inline-block allow us to keep everything in the flow and at the bottom of the line box.
November 17, 2010 at 5:08 am
the same approach is also used here http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
November 17, 2010 at 7:58 am
@Ionut
Years ago I put a demo on tjkdesign.com to display thumbnails based on this method:
http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_-moz-inline-box_and_zoom.asp
I had other interesting ways to display those:
The bottom of the image is the baseline:
- http://tjkdesign.com/articles/thumbnail_and_caption/image_grid.asp
The bottom of the item is the baseline:
- http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_-moz-inline-stack_and_zoom.asp
Displaying the items in a grid:
- http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_table-cell_and_zoom.asp
November 24, 2010 at 8:14 am
@Ionut and @Thierry
I’ve also put something on my site a while ago. It may be a little bit easier to understand as it only attempts to show you a solution for display:inline-block the way the standards consortium defines it.
http://www.roydukkey.com/display-inline-block-zoom/