HTML Responsive Tables

Danger Phoenix · 16 Jan 2015 at 00:50

I am trying to create a responsive email using HTML and CSS and seem to have hit a snag.

I have a container table, with two tables within in, which float. However, I want to vertically align them to the bottom of that container, irrespective of their heigh.

I set up a JSFiddle here:
http://jsfiddle.net/hirenshah/mhn3oavx/

The pink area needs to be at the bottom and not the top, but I have read that it is not possible to do whilst the tables are floating.

Any suggestions?

Danger Phoenix · 16 Jan 2015 at 16:42

Sorry for not explaining better. I would like the table which says "Table 1" in it, to be at the bottom when in the full width view. So in other words, the pink table should line up to the bottom of the yellow table.

Danger Phoenix · 17 Jan 2015 at 12:41

Cheers for the advice guys

I've gone back to the design team and just told them it isn't possible to do (may not be completely accurate but it stops the discussion right there). In the mean time I've continued with the proof of concept and this is what I have so far:
http://jsfiddle.net/hirenshah/rdux8vkg/15/

MSO is oh so annoying when it comes to ignoring specified image dimensions, so I'm going to have to use if logic everywhere to use a different image for MSO

Danger Phoenix · 20 Jan 2015 at 08:54

I've gone down the route of adapted an existing template provided by Litmus