Wrapper
Wrapper creates the necessary structure to wrap elements so that full width backgrounds can be applied.
Basics
When using Inky HTML, the <wrapper> tag will create a <table>, <tr>, <th> structure needed to create consistent full width backgrounds. You can add classes to the wrapper to target CSS properties on it or target elements within it. The .wrapper-inner class is available to add padding to the wrapper.
<wrapper>
content
</wrapper><html>
<head></head>
<body>
<table class="wrapper" align="center">
<tbody>
<tr>
<td class="wrapper-inner">
content
</td>
</tr>
</tbody>
</table>
</body>
</html>DEMO
Full (fluid) width header or footer
Creating a fluid header with the <wrapper> component is pretty straight forward. Wrapping a <container> will keep your content bound to the width of the container. Add a class to the <wrapper class=""> to add a background color.
<style type="text/css">
.header {
background: #8a8a8a;
}
.header .columns {
padding-bottom: 0;
}
.header p {
color: #fff;
margin-bottom: 0;
}
.header .wrapper-inner {
padding: 20px; /*controls the height of the header*/
}
.header .container {
background: #8a8a8a;
}
.wrapper.secondary {
background: #f3f3f3;
}
</style>
<wrapper class="header" bgcolor="#8a8a8a">
<container>
<row class="collapse">
<columns small="6" valign="middle">
<img src="https://placehold.it/200x50/663399">
</columns>
<columns small="6" valign="middle">
<p class="text-right">BASIC</p>
</columns>
</row>
</container>
</wrapper><html>
<head>
<style type="text/css">
.header {
background: #8a8a8a;
}
.header .columns {
padding-bottom: 0;
}
.header p {
color: #fff;
margin-bottom: 0;
}
.header .wrapper-inner {
padding: 20px;
/*controls the height of the header*/
}
.header .container {
background: #8a8a8a;
}
.wrapper.secondary {
background: #f3f3f3;
}
</style>
</head>
<body>
<table bgcolor="#8a8a8a" class="wrapper header" align="center">
<tbody>
<tr>
<td class="wrapper-inner">
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th class="small-6 large-6 columns first" valign="middle">
<table>
<tbody>
<tr>
<th>
<img src="https://placehold.it/200x50/663399">
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-6 large-6 columns last" valign="middle">
<table>
<tbody>
<tr>
<th>
<p class="text-right">BASIC</p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>DEMO
Using this structure outside of the container will yield a fluid width background that expands to the width of the email client's viewport.
