Split page into 3 columns with content in wider center column? - html

Question

I need to create a 3-column layout where the center column is twice the width of the side columns, without using bootstrap, since bootstrap doesn't work in emails.
In bootstrap, it would be:
<div class="container">
<div class="col-3">
</div>
<div class="col-6">
<!-- All page content goes here -->
</div>
<div class="col-3">
</div>
</div>
How can I achieve this without using bootstrap?
Note
I found this code:
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
But that didn't seem to work.

Answer 1

For emails you need tables:
table {
width:100%;
table-layout:fixed;
border-spacing:0;
}
td {
width:25%;
}
td:nth-child(2) {
width:50%;
}
.column {
padding:15px;
border:1px solid;
}
<table class="row">
<tr>
<td class="column"></td>
<td class="column"></td>
<td class="column"></td>
</tr>
</table>

Answer 2

Especially for emails the simplest solutions are the best, so I'd recommended to use table with inline styles, like this:
table {
width: 600px;
}
td {
border: 1px solid #000;
}
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="width: 25%; height: 20px;"></td>
<td style="width: 50%; height: 20px;"></td>
<td style="width: 25%; height: 20px;"></td>
</tr>
</tbody>
</table>

Answer 3

I am not sure in what sense the given example didn't work as this snippet gives columns of widths 25%, 50%, 25% as required in the question.
However, note that some email systems may not support CSS other than an inline style so in the snippet the styles have been put inline and padding etc removed as you will have to decide what to do about that and compensate in the width definitions. It may still be that email systems do not accept HTML even just with inline CSS but it depends on your exact use case whether this matters and how you will ensure the info is presented OK to the user if it is ignored.
<div>
<div style=" background-color:#aaa; width: 25%; float: left;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div style=" background-color:#bbb; width: 50%; float: left;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div style=" background-color:#ccc; width: 25%; float: left;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>

Answer 4

As I wrote in the comment above, today, you can only use table display for emails. Flex and Grid will not work!
There is one more very important point. Template for emails does not have access to CSS, so all styles must be specified inside tags.
I made you a simple template for emails with content. Just use it. If you need to fix or modify something, then let me know.
<table style="width: 100%; border: 1px solid black">
<tr>
<th style="width: 25%; border:1px solid black">title 1</th>
<th style="width: 50%; border:1px solid black">title 2</th>
<th style="width: 25%; border:1px solid black">title 3</th>
</tr>
<tr>
<td style="border:1px solid black">content 1</td>
<td style="border:1px solid black">content 2</td>
<td style="border:1px solid black">content 3</td>
</tr>
</table>

Answer 5

Use inline-styles:
<div style="display: flex;">
<div style="flex: 25%; max-width: 25%">
column 1
</div>
<div style="flex: 50%; max-width: 50%">
column 2
</div>
<div style="flex: 25%; max-width: 25%">
column 3
</div>
</div>

Answer 6

.row{
display:flex;
height:150px;
border:2px solid red;
}
.column{
border:1px solid green;
margin:2px;
width:30%;
}
.column1, .column3{
flex-grow:1;
}
.column2{
flex-grow:2;
}
<div class="row">
<div class="column"></div>
<div class="column2 column"></div>
<div class="column"></div>
</div>
The flex grow should be a very quick solution for you. Run the code to see how it works.

Answer 7

The second bit of code you posted doesn't work because you haven't defined the row or column CSS classes.
You have a two main options:
Use the bootstrap classes by copying their code into a style tag in your email body.
Write your own classes to achieve this layout. Here's an example using display: flex.
.row {
height: 100vh;
width: 100vw;
display: flex;
}
#col1 {
height: 100vh;
flex-basis: 20%;
background-color: red;
}
#col2 {
height: 100vh;
flex-basis: 60%;
background-color: green;
}
#col3 {
height: 100vh;
flex-basis: 20%;
background-color: blue;
}
<div class="row">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>

Answer 8

UPDATE:
For Emails, Tables will work for sure :) Yup you need to go for tables only. Because some email systems don't support external CSS.
litmus.com
.table{
width:100%;
}
tr td{
width:25%;
height:50px;
}
tr .second{
width:50%;
}
<table class="table" border="1" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td class="second"></td>
<td></td>
</tr>
</table>