-
Notifications
You must be signed in to change notification settings - Fork 786
/
3columns-to-rows.html
205 lines (168 loc) · 9.1 KB
/
3columns-to-rows.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
<title>Antwort - responsive Email Layout</title>
<style type="text/css">
/* Resets: see reset.css for details */
.ReadMsgBody { width: 100%; background-color: #ebebeb;}
.ExternalClass {width: 100%; background-color: #ebebeb;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table {border-spacing:0;}
table td {border-collapse:collapse;}
.yshortcuts a {border-bottom: none !important;}
/* Constrain email width for small screens */
@media screen and (max-width: 600px) {
table[class="container"] {
width: 95% !important;
}
}
/* Give content more room on mobile */
@media screen and (max-width: 480px) {
td[class="container-padding"] {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* Styles for forcing columns to rows */
@media only screen and (max-width : 600px) {
/* force container columns to (horizontal) blocks */
td[class="force-col"] {
display: block;
padding-right: 0 !important;
}
table[class="col-3"] {
/* unset table align="left/right" */
float: none !important;
width: 100% !important;
/* change left/right padding and margins to top/bottom ones */
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #eee;
}
/* remove bottom border for last column/row */
table[id="last-col-3"] {
border-bottom: none !important;
margin-bottom: 0;
}
/* align images right and shrink them a bit */
img[class="col-3-img"] {
float: right;
margin-left: 6px;
max-width: 130px;
}
}
</style>
</head>
<body style="margin:0; padding:10px 0;" bgcolor="#ebebeb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br>
<!-- 100% wrapper (grey background) -->
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#ebebeb">
<tr>
<td align="center" valign="top" bgcolor="#ebebeb" style="background-color: #ebebeb;">
<!-- 600px container (white background) -->
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" bgcolor="#ffffff">
<tr>
<td class="container-padding" bgcolor="#ffffff" style="background-color: #ffffff; padding-left: 30px; padding-right: 30px; font-size: 13px; line-height: 20px; font-family: Helvetica, sans-serif; color: #333;" align="left">
<br>
<!-- ### BEGIN CONTENT ### -->
<div style="font-weight: bold; font-size: 18px; line-height: 24px; color: #D03C0F;">
The world scouts at us whale hunters
</div>
<br>
<table border="0" cellpadding="0" cellspacing="0" class="columns-container">
<tr>
<td class="force-col" style="padding-right: 20px;" valign="top">
<!-- ### COLUMN 1 ### -->
<table border="0" cellspacing="0" cellpadding="0" width="175" align="left" class="col-3">
<tr>
<td align="left" valign="top" style="font-size:13px; line-height: 20px; font-family: Arial, sans-serif;">
<img src="http://internations.github.com/antwort/images/grey-175x130.png" alt="Image Caption" border="0" hspace="0" vspace="0" style="vertical-align:top; padding-bottom:12px;" class="col-3-img">
<a href="#" style="color:#2469A0; font-weight:bold">Herman Melville</a><br>
It's worse than being in the whirled woods, the last day of the year! Who'd go climbing after chestnuts now? But there they go, all cursing, and here I don't.
<br>
</td>
</tr>
</table>
</td>
<td class="force-col" style="padding-right: 20px;" valign="top">
<!-- ### COLUMN 2 ### -->
<table border="0" cellspacing="0" cellpadding="0" width="175" align="left" class="col-3">
<tr>
<td align="left" valign="top" style="font-size:13px; line-height: 20px; font-family: Arial, sans-serif;">
<img src="http://internations.github.com/antwort/images/grey-175x130.png" alt="Image Caption" border="0" hspace="0" vspace="0" style="vertical-align:top; padding-bottom:12px;" class="col-3-img">
<a href="#" style="color:#2469A0; font-weight:bold">Herman Melville</a><br>
Fine prospects to 'em; they're on the road to heaven. Hold on hard! Jimmini, what a squall! But those chaps there are worse yet—they are your…
<br>
</td>
</tr>
</table>
</td>
<td class="force-col" valign="top">
<!-- ### COLUMN 3 ### -->
<table border="0" cellspacing="0" cellpadding="0" width="175" align="right" class="col-3" id="last-col-3">
<tr>
<td align="left" valign="top" style="font-size:13px; line-height: 20px; font-family: Arial, sans-serif;">
<img src="http://internations.github.com/antwort/images/grey-175x130.png" alt="Image Caption" border="0" hspace="0" vspace="0" style="vertical-align:top; padding-bottom:12px;" class="col-3-img">
<a href="#" style="color:#2469A0; font-weight:bold">I am Ishmael</a><br>
White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and…
<br>
</td>
</tr>
</table>
</td>
</tr>
</table><!--/ end .columns-container-->
</td>
</tr>
<tr>
<td class="container-padding" bgcolor="#ffffff" style="background-color: #ffffff; padding-left: 30px; padding-right: 30px; font-size: 13px; line-height: 20px; font-family: Helvetica, sans-serif; color: #333;" align="left">
<br><br>
<div style="font-weight: bold; font-size: 18px; line-height: 24px; color: #D03C0F; border-top: 1px solid #ddd;"><br>How it works</div>
<br>
You should view the source code to see how this works. If you're struggling, here's a bit more documentation
<br><br>
<em>Markup contains:</em>
<ul>
<li>A container table with 3 columns</li>
<li>Wrapper tables with one cell inside each column</li>
</ul>
<em>Manipulating the layout means:</em>
<ul>
<li>Forcing container columns to (horizontal) blocks</li>
<li>Unset paddings and alignment in inner tables</li>
<li>Float image to the right</li>
</ul>
<em>Why do you need inner wrapper tables?</em>
<ul>
<li>The last column needs to float to the right edge, via align="right".</li>
<li>Clears floated images in mobile versions.</li>
</ul>
<div style="font-weight: bold; font-size: 18px; line-height: 24px; color: #D03C0F">Tips</div>
<br>
<em>Slightly less than 600px</em><br>
Your columns and container table probably will add up <em>slightly less</em> than <span style="font-family: Andale Mono, Courier, monospace; color: #666;">600px</span> to work in Outlook. How much less? Only testing, trial and error, and real content will tell you what that magic number is.
<br><br>
<div style="border-top: 1px solid #ddd;">
<br>
N.B. This copy is simple HTML and probably won't render 100% in an email client as you see it in a browser. It's meant as documentation, <em>not</em> part of the template.
</div>
<!-- ### END CONTENT ### -->
<br><br>
</td>
</tr>
</table>
<!--/600px container -->
</td>
</tr>
</table>
<!--/100% wrapper-->
<br>
<br>
</body>
</html>