Equal height blocks with tables

With unequal amounts of copy in bottom cells

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		Left	This bottom right cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed

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		Left	This bottom right cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed

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		Left	This bottom right cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed		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		Left	This bottom right cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed		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		Left	This bottom right cell has more text to show whether the bottom cells will do the right thing and resize their respective widths as needed		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 colgroups specifying the colours

Previous: With blank gifs to force the gutter width

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