Best way to position content side by side on larger screens and full width on smaller screens in HTM-CodePudding

Hi I am constructing some email HTML. There is a maximum width of 600px wide in the outer container table. I have 3 blocks of content and I need to know the best way to have those three blocks of content side by side on screens 600px wide and over (so each block being a third of the width) but on screens below 600px wide have the first block then below it the next two blocks each take up 50% without using media queries?

Can it be done with tables and columns or do I need to consider something else?

600px wide and above

===========================================
|   block 1   |   block 2   |   block 3   |
===========================================

Below 600px wide

Block 1 can but doesn't necessarily need to take up full width as long as block 2 and 3 are below it and they each take up 50% of the width.

===============
|   block 1   |
===================================
|     block  2    |    block 3    |
===================================

I've tried using table cells with min-widths but that didn't work.

I need to achieve it with inline styling which I think rules out media queries and it needs to be well supported across all email platforms. Should I just use divs, min-widths and floats or is there a more supported way?

P.S. they can be wrapped in whatever div / table to achieve it so block 2 and 3 can be wrapped in something separate from block 1 etc if that helps.

CodePudding user response：

So, we can use media queries, as long as we realise their limitations. You could do them desktop-first (max-width), in which case those mobile email clients that do not support <style> blocks (and hence media queries) would get the desktop version (not good - not responsive). That's largely Gmail IMAP, a type of Gmail primarily used by businesses with their own domain name.

Alternatively, we can do it mobile-first (min-width), in which case those desktop email clients that do not support <style> blocks would get the mobile version (there are very few of these, and they tend to be very old ISP webmail).

Mobile-first is the least-worst, IMHO, but it can depend on your audience.

So I'm following the 'fluid-hybrid' method so you can look this up for more info elsewhere. Essentially, by creating 3 inline-blocks at the size we want, we can make it stack organically on mobiles. Then for desktops, we use the media query. For Outlook desktop (Windows), it gets its own wrapper (the if mso's), because it has a print-based rendering engine (MS Word) that doesn't support media queries:

<html>
<head>
<style type="text/css">
@media screen and (min-width: 600px) {
      .three-column .column {
      max-width: 200px;
      }
  }
</style>
</head>

<body style="margin:0;padding:0;min-width:100%;">
    <!-- START OUTER WRAPPER -->
    <center id="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
        <div style="max-width:600px;">
            <!--[if mso]><table width="600" align="center" cellpadding="0" cellspacing="0" role="presentation"><tr><td style="padding:0;"><![endif]-->
            <table align="center" style="font-family:Arial, sans-serif;color:#333333;font-size:16px;margin:0 auto;width:100%;max-width:600px;" cellpadding="0" cellspacing="0" role="presentation">
            <!-- END OUTER WRAPPER -->
            <tr>
    <td  style="padding:0 0px;text-align: center;font-size:0;">
        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" role="presentation"><tr><td width="200" valign="top" style="padding:0;border-collapse:collapse;"><![endif]-->
        <div  style="width:100%;display:inline-block;vertical-align:top;">
            <img width="200" src="https://via.placeholder.com/200" style="width:100%;max-width:200px!important" />
        </div>
        <!--[if mso]></td><td width="200" valign="top" style="padding:0;border-collapse:collapse;"><![endif]-->
        <div  style="width:50%;display:inline-block;vertical-align:top;">
            <img width="200" src="https://via.placeholder.com/200" style="width:100%;" />
        </div>
        <!--[if mso]></td><td width="200" valign="top" style="padding:0;border-collapse:collapse;"><![endif]-->
        <div  style="width:50%;display:inline-block;vertical-align:top;">
            <img width="200" src="https://via.placeholder.com/200" style="width:100%;" />
        </div>
        <!--[if mso]></td></tr></table><![endif]-->
    </td>
</tr>
                    
            <!-- START OUTER WRAPPER -->
            </table>
            <!--[if mso]></td></tr></table><![endif]-->
        </div>
    </center>
    <!-- END OUTER WRAPPER -->
</body>
</html>

CodePudding user response：

Check out Foundation as well - they have good platform when it comes to ordering block elements depending on screen sizes, mobile etc.

Foundation for Emails 2