CSS Quick Tip: Inline Boxes with Bottom Alignment

By YUI TeamNovember 15, 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