Web Design Blog
Thoughts and commentary about web design plus links to helpful resources including fonts, plugins, templates, stock photos, software, scripts, tutorials, and other useful tools for webmasters!
Tuesday, September 18, 2007
2-Col Tableless Layout Tutorial at Wellstyled.com
Sometimes you may need two columns of the same height in your layout. If the height of their content differs, their backgrounds should flow and end at the same position. This is exactly how columns were made by tables.
There are several ways to make two columns in CSS. You can use one floating block, both blocks floating, one block positioned into other’s margin etc. Anyway, every time the block ends where its content ends. That’s OK — in fact, the “same-height columns” is just a design illusion: not the columns, but the background under them makes the effect. Thus, let’s make the columns of their own height and then just play with the background. That’s the matter.
Browse By Date
| July 2008 | ||||||
|---|---|---|---|---|---|---|
| S | M | T | W | T | F | S |
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 | ||
Browse by Topic
Archives
Stock Photos
