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).

Figure 1: The submit button is aligned with other from controls

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).

Figure 2: The submit button wraps to the next line, below the other controls

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.

The Demos

Tagged as:

8 Comments

  1. Jeffrey Gilbert said:
    November 16, 2010 at 7:30 am

    Good ole ie6 and 7

  2. 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).

  3. 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 ;-)

  4. @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.

  5. 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.

  6. @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

  7. @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/