This page summarises the various ways that HBoxes can be rendered using HTML and CSS. We will assess each method on the following criteria:
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 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Children are placed in the normal flow of the page:
Elastic — children are dynamically sized by their content:
Blocks — block children stay inline using inline-block:
As do nested block children:
Baseline — children are vertically aligned on the baseline:
Flex — cannot stretch block children to fill the remaining available horizontal space
The closest we can get is to specify an explicit width:
Wrap — can prevent children from being wrapped:
Can also allow children to be wrapped:
Semantic — method uses semantic markup
Whitespace — markup whitespace is rendered as gaps between children
IE6
Children are floated to the left:
Elastic — children are dynamically sized by their content:
Blocks — block children stay inline:
As do nested block children:
Baseline — cannot vertically align children on the baseline:
Flex — cannot stretch block children to fill the remaining available horizontal space
Floating children to the right does not stretch flexed child:
But we can flex a single block child by embedding it within the parent box:
Although this means that we then cannot constrain nested block children to a particular column:
Wrap — cannot prevent children from being wrapped:
Semantic — method uses semantic markup
Whitespace — markup whitespace is ignored
IE6 — various float bug fixes are required
Children are absolutely positioned within the box:
Elastic — children are not dynamically sized by their content; all positions are explicit:
Blocks — block children stay inline:
As do nested block children:
Baseline — cannot vertically align children on the baseline:
Flex — can stretch block children to fill the remaining available horizontal space:
Wrap — cannot wrap children:
Semantic — method uses semantic markup
Whitespace — markup whitespace is ignored
IE6 — flex bug fixes required
Children are laid out using the table model:
Elastic — children are dynamically sized by their content:
Blocks — block children stay inline:
As do nested block children:
Baseline — can vertically align children on the baseline:
Flex — can stretch block children to fill the remaining available horizontal space:
Wrap — cannot wrap children:
Semantic — method uses semantic markup
Whitespace — markup whitespace is ignored
IE6 — not supported by IE6-7 nor by IE7-js
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)