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

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.

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? — Max Senft, Jan 16 '21 at 15:42
uhm what did you try so far? easy taks for `CSS-Grid`. Can also be done with `flexbox` and the `float`-technique shown in your tutorial link. — tacoshy, Jan 16 '21 at 15:44
Do you want to create a layout for your email? If for electronic writing, then **flex** and **grid** will not work. You need to use a `table`. — s.kuznetsov, Jan 16 '21 at 15:47
@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, Jan 16 '21 at 15:48

score 5 · Answer 1 · answered Jan 16 '21 at 15:51

5

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>

answered Jan 16 '21 at 15:51

Temani Afif

245,468
26
309
415

Why table and not grid system ? @Temani Afif – Sido4odus Jan 17 '21 at 11:48
1

@SidouMahmoud the only system that is old enough and is supported by all the email client (like wanted by the OP) – Temani Afif Jan 17 '21 at 12:07
Ah, I did not read the comments in the post above. Thank you – Sido4odus Jan 17 '21 at 12:44

score 3 · Answer 2 · answered Jan 16 '21 at 15:50

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>

score 2 · Answer 3 · answered Jan 16 '21 at 15:55

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>

score 1 · Answer 4 · answered Jan 16 '21 at 16:20

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>

score 0 · Answer 5 · answered Jan 16 '21 at 15:46

0

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>

answered Jan 16 '21 at 15:46

Simplicius

2,009
1
5
19

mukhtar.b_ · Answer 6 · 2021-01-16T16:45:26.103

0

.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.

edited Jan 16 '21 at 16:45

answered Jan 16 '21 at 16:31

mukhtar.b_

44
4

I don't think this would work in an email. – GBra 4.669 Jan 16 '21 at 19:58

Imran Rafiq Rather · Answer 7 · 2021-01-16T16:02:27.740

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>

score -1 · Answer 8 · answered Jan 16 '21 at 15:45

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>

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

Note

8 Answers8