CSS Quick Tip: Inline Boxes with Bottom Alignment

November 15, 2010 at 3:09 pm by Thierry Koblentz | In CSS 101, Development | 8 Comments

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

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

8 Comments

Good ole ie6 and 7

Comment by Jeffrey Gilbert — November 16, 2010 #
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).

Comment by Fabrice — November 16, 2010 #
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 ;-)

Comment by Fabrice — November 16, 2010 #
@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.

Comment by Thierry Koblentz — November 16, 2010 #
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.

Comment by Reply SMS Hindi — November 16, 2010 #
the same approach is also used here http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Comment by ionut popa — November 17, 2010 #
@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

Comment by Thierry Koblentz — November 17, 2010 #
@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/

Comment by roydukkey — November 24, 2010 #

Sorry, the comment form is closed at this time.

Yahoo! User Interface Blog (YUIBlog)