Equal height blocks with tables

No frills

Side by Side 1 - Left

This top cell has more text to show what happens when the contents of the top cells are unequal. More filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, and yet more filler text
 

Side by Side 1 - Right

This top cell has less text and is just minding its own business
This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right

Side by Side 2 - Left

This top cell has less text and is just minding its own business
 

Side by Side 2 - Right

This top cell has more text to show what happens when the contents of the top cells are unequal. More filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, and yet more filler text
This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right

Two up inside a wrapper

This top cell has more text to show what happens when the contents of the top cells are unequal. More filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, and yet more filler text   This top cell has less text and is just minding its own business
This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right

One up inside a wrapper

This cell doesn't need a class because it doesn't need its width fixing or anything doing to it - it can simply exist. More filler text, more filler text, more filler text, more filler text, and yet more filler text
This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right

Side by Side 3 - Left

This top cell has less text and is just minding its own business
 

Side by Side 3 - Center

This top cell has less text and is just minding its own business
 

Side by Side 3 - Right

This top cell has more text to show what happens when the contents of the top cells are unequal. More filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, and yet more filler text
This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right

Oneup - table instead of wrapper

This top cell has more text to show what happens when the contents of the top cells are unequal. More filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, and yet more filler text
This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right

Side by Side 3 - Left

This top cell has less text and is just minding its own business
 

Side by Side 3 - Center

This top cell has less text and is just minding its own business
 

Side by Side 3 - Right

This top cell has more text to show what happens when the contents of the top cells are unequal. More filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, and yet more filler text
This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right

Side by Side 3 - Left

This top cell has more text to show what happens when the contents of the top cells are unequal. More filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, more filler text, and yet more filler text
 

Side by Side 3 - Center

This top cell has less text and is just minding its own business
 

Side by Side 3 - Right

This top cell has less text and is just minding its own business
This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right This bottom left cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed Right

Next: With left and right cell widths fixed

Contents

  1. No frills
  2. With left and right cell widths fixed
  3. With blank gifs to force the gutter width
  4. With unequal amounts of copy in bottom cells
  5. With colgroups specifying the colours
  6. With a clipped corner and borders
  7. Hey, I want rounded corners!
  8. More rounded corners, but watch IE go mental
  9. Now go gutterless
  10. Gutters without a gutter cells
  11. But what does it do to the plain version?
  12. And what does it do to the version with borders?
  13. So let's try and get the borders working
  14. Top left corner doesn't work, so what can we have?
  15. What about just plain old borders?
  16. What about just plain old borders with a gutter cell?

CSS Stuff index | XHTML | CSS