HBox Rendering

This page summarises the various ways that HBoxes can be rendered using HTML and CSS. We will assess each method on the following criteria:

  1. Elastic — are children dynamically sized by their content?
  2. Blocks — are block children correctly laid out?
  3. Baseline — are children vertically aligned on the baseline?
  4. Flex — can block children be stretched to fill the remaining available horizontal space?
  5. Wrap — can we control whether children that overflow are wrapped?
  6. Semantic — does the method use semantic markup?
  7. Whitespace — is markup whitespace significant in the layout?
  8. IE6 — does this method work in IE6?

Each method is covered in detail below. The following table summarises the results:

Method Elastic Blocks Baseline Flex Wrap Semantic Whitespace IE6
Flow
Floats
Absolute Positioning
Table Model
Tables

Method #1: Flow

Children are placed in the normal flow of the page:

I1 I2 I3

Elastic — children are dynamically sized by their content:

I1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. I3

Blocks — block children stay inline using inline-block:

I1 I2 I3
B1

As do nested block children:

I1 I2 I3
B1
B2
B3

Baseline — children are vertically aligned on the baseline:

I1 I2 I3

Flex — cannot stretch block children to fill the remaining available horizontal space

The closest we can get is to specify an explicit width:

I1
B1
I2

Wrap — can prevent children from being wrapped:

I1 I2 I3

Can also allow children to be wrapped:

I1 I2 I3

Semantic — method uses semantic markup

Whitespace — markup whitespace is rendered as gaps between children

IE6

Method #2: Floats

Children are floated to the left:

I1 I2 I3

Elastic — children are dynamically sized by their content:

I1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. I3

Blocks — block children stay inline:

I1 I2 I3
B1

As do nested block children:

I1 I2 I3
B1
B2
B3

Baseline — cannot vertically align children on the baseline:

I1 I2 I3

Flex — cannot stretch block children to fill the remaining available horizontal space

Floating children to the right does not stretch flexed child:

I1
B1
I2

But we can flex a single block child by embedding it within the parent box:

I1 I2
B1

Although this means that we then cannot constrain nested block children to a particular column:

I1 I2
B1
B2
B3

Wrap — cannot prevent children from being wrapped:

I1 I2 I3

Semantic — method uses semantic markup

Whitespace — markup whitespace is ignored

IE6 — various float bug fixes are required

Method #3: Absolute Positioning

Children are absolutely positioned within the box:

I1 I2 I3

Elastic — children are not dynamically sized by their content; all positions are explicit:

I1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. I3

Blocks — block children stay inline:

I1 I2 I3
B1

As do nested block children:

I1 I2 I3
B1
B2
B3

Baseline — cannot vertically align children on the baseline:

I1 I2 I3

Flex — can stretch block children to fill the remaining available horizontal space:

I1
B1
I2

Wrap — cannot wrap children:

I1 I2 I3

Semantic — method uses semantic markup

Whitespace — markup whitespace is ignored

IE6 — flex bug fixes required

Method #4: Table Model

Children are laid out using the table model:

I1 I2 I3

Elastic — children are dynamically sized by their content:

I1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. I3

Blocks — block children stay inline:

I1 I2 I3
B1

As do nested block children:

I1 I2 I3
B1
B2
B3

Baseline — can vertically align children on the baseline:

I1 I2 I3

Flex — can stretch block children to fill the remaining available horizontal space:

I1
B1
I2

Wrap — cannot wrap children:

I1 I2 I3

Semantic — method uses semantic markup

Whitespace — markup whitespace is ignored

IE6 — not supported by IE6-7 nor by IE7-js

Method #5: Tables

Tables as layout:

I1 I2 I3

Elastic — children are dynamically sized by their content:

I1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. I3

Blocks — block children stay inline:

I1 I2 I3
B1

As do nested block children:

I1 I2 I3
B1
B2
B3

Baseline — can vertically align children on the baseline:

I1 I2 I3

Flex — can stretch block children to fill the remaining available horizontal space:

I1
B1
I2

Wrap — cannot wrap children

I1 I2 I3

Semantic — method does not use semantic markup; it uses tables

Whitespace — markup whitespace is ignored

IE6 — works in IE6 (with either an explicit cellspacing attribute or by using IE7-js to support border-spacing style)