quetion about 2 column layouts

Hi guys.

Just wanted some general feedback about how people create 2 column layouts. I read recently in a CM blog post (or twitter link, I froget), about coding/design tips that its not recommended to nest tables. How do you guys generally create 2 column layouts with repeaters in each? The other option is to use divs, but I don't know what support for divs is like in email clients. See example below.


Please excuse the misspelling of 'question' in the post title... fingers were faster than brain

BThies BThies, 8 years ago

Without going into too much detail:
- Nesting tables is fully supported and great for creating columns and horizontal spacing.
- <DIV>'s are fully supported and great for lines of text and creating vertical spacing.

Use both often.

Just create a table that has one row for the header, one row for the body, and one row for the footer.

Within the body row, create a nested table with three columns.  Within the first and last column you can create whatever you want repeated (more nested tables, div's, title, description, etc.).  The center column acts as the spacer between the other two.

The reason for nesting the first table in the body is to avoid colspans that can haunt you later.

Brian Thies
Professional Email Developer
Thies Publishing
geeves, 8 years ago

Thanks Brian.

What is the problem with colspans?


Ara Garabedian
Multimedia Designer/Developer
BThies BThies, 8 years ago

Hi Ara,

From a management perspective, it can sometimes be a pain when coding the bottom of a section to match the top based on the widths that were first established. (or left to right/right to left with rowspans)  Not to say they absolutely can't be used, but I wouldn't use them in any elaborate format.

As many designers on here have found out, if the widths of your <TD>'s are not precise and exact throughout the entire layout (even your colspans), you may end up with breaks, gaps, or other unexpected issues.  I've seen many cases of colspans/rowspans & border combinations that don't display correctly across all e-mail clients.  Sometimes one or two e-mail clients choose not to play nicely with them for random reasons.

At the end of the day, all the designing out there can be done without them - so I always recommend staying away from something that may break your design come test time (and then require a complete overhaul to function again).  Less coding time and less headaches.  :-)

Brian Thies
Professional Email Developer
Thies Publishing

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free