WV3
Floating Columns
I'm trying to find the best solution for floating columns. Right now I have it so when my emails go mobile the column on the left always goes below the right, however I want to do the reverse, meaning the column on the left stays the top most section and what's on the right moves below.
Anyone found a good solid solution that works across a majority of Email Service Providers? (Desktop and mobile)
Hey there William
we recently wrote an Action Rocket Labs post about this - take a look here
Hi William, have you tried using the direction:ltr and direction:rtl options? It's used for writing text left-to-right (e.g. for Arabic). Using the usual display:block for table cells combined with the above direction it should work nicely for you.
Here's some example code:
Nice! I'd never actually thought of using direction before. From testing it looks like both
dir="rtl"andstyle="direction: rtl;"have good support.I use the below code. It's very simple and works across almost all email clients with the notable exception being Gmail on mobile. The columns work on Gmail but due to the lack of support for media queries, they do not stack (you can get around this by setting a fixed width on the columns instead of a % width, if desired).
To reverse the order of the columns when stacking, simply reorder them in the HTML.
Have a few patterns for this. Mostly using the same method as Elliot, i.e. taking advantage of different display types:
display: block,display: table-header-group,display: table-footer-group, anddisplay: table-caption.Source Order Shift Example
Column Drop
Also have a blog post here discussing different methods of content choreography within responsive emails
I've had luck using tables instead of floats, and adding a mobile only class to the TDs.
td[class="td_mobile"] { display : block !important;}
The TDs change from left-to-right to top-to-bottom.