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>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>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>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>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>.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.
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:
style tag in your email body.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>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.
.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>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?
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.
Scroll down to the section “In this example, we will create three unequal columns:” and click the “Try It Yourself” button. This should be exactly what you’re looking for?
uhm what did you try so far? easy taks for
Do you want to create a layout for your email? If for electronic writing, then
@s.kuznetsov yes it’s for emails. I only learned bootstrap wouldn’t work about an hour ago, so I cannot use it, and cannot use anything else that won’t work in email.
@stevec, use a
Why table and not grid system ? @Temani Afif
@SidouMahmoud the only system that is old enough and is supported by all the email client (like wanted by the OP)
Ah, I did not read the comments in the post above. Thank you
I don’t think this would work in an email.