Menu icon Foundation
Two columns, different contents, same height + custom columns

Hi everyone,

 

I'd like to work with foundation emails but before choosing it as mail tool for our newsletters, I'd like to solve some issues.

I simply would like to have two columns with some background colors applied to be the same height even with different contents.

I thought that using the <spacer> tag with a specific size would be the right choice, but It seems that when I use Litmus, the two columns aren't exactly the same height within OUTLOOK. Which is an issue as It's requested by our designers.

Here is the result within Outlook 2013 using Litmus:

columns don

Here is the code I used to achieve this result:

  <row>
        <columns large="6">
          <callout class="primary">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Curabitur dignissim in turpis in feugiat. Proin sem orci, varius eu justo a,
            blandit rhoncus urna. Aliquam erat volutpat. Quisque in diam vel massa ultricies
            venenatis vitae nec lorem. Nullam a dolor a ante ultrices bibendum ullamcorper eu ante.
            Phasellus vestibulum at eros non efficitur. Curabitur orci magna, venenatis at turpis non, maximus sollicitudin
            felis
          </callout>
         </columns>
         <columns large="1">

          </columns>

          <columns large="6">
            <callout class="secondary">
              Suspendisse elementum diam id est ullamcorper consectetur.
              Nulla sagittis eget lacus ut efficitur. Ut sit amet cursus turpis, at commodo lacus.
              <spacer size="180"></spacer>
            </callout>
          </columns>
      </columns>
  </row>

This failure 's led me to find another solution to have two columns of the same height, whatever the content of these ones. I thought that would be a good idea to apply a background color to a table, and then within this table set 3 columns. The one in the middle would be used as a gutter with a white background.

This work, but the problem with this solution is that the column in the middle takes too much space, this one is too wide.

While the space iof this column should be the same as a gutter in fact. It's quite normal, as this column in the middle which has a large-1 class.

This solution could work If I could add another class such has "large-0.5" and then to set "5.5" to the column on the left and right. This way my column in the middle would have the approximately the width I want.

Here is a screenshot:

 

 

Here is the code (inline styles are there for troubleshooting quickly);

 

  <row>
    <columns>
      <row style="background-color:red;" class="collapse">


      <columns large="5">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Curabitur dignissim in turpis in feugiat. Proin sem orci, varius eu justo a,
        blandit rhoncus urna. Aliquam erat volutpat. Quisque in diam vel massa ultricies
        venenatis vitae nec lorem. Nullam a dolor a ante ultrices bibendum ullamcorper eu ante.
        Phasellus vestibulum at eros non efficitur. Curabitur orci magna, venenatis at turpis non, maximus sollicitudin
        felis.
      </columns>
      <columns large="1" style="background-color:white;">

      </columns>
      <columns large="5">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Curabitur dignissim in turpis in feugiat. Proin sem orci, varius eu justo a,
        blandit rhoncus urna. Aliquam erat volutpat. Quisque in diam vel massa ultricies
        felis.
      </columns>
    </row>
    </columns>

</row>

 

If there is a solution to make it working under outlook, using the spacer I don't mind at all. It's even better...

So, does anyone could help me please ? I'm kind of stuck at the moment even with all the things I've tried.

 

EDIT: In the meantime I 've simply tried to set a fixed height for both columns and it seems to works well for most webmail clients.

However, if there is a solution that helps to achieve the same result, without having to adapt the css eachtime I use the template, this could be cool. I haven't thought to do that directly, because previously when not using foundation for emails, dealing with the height property causes a lot of inconsistencies. Foundation for emails seems to take care of these issues when using it, which is great.

columnsheight

Hi everyone,

 

I'd like to work with foundation emails but before choosing it as mail tool for our newsletters, I'd like to solve some issues.

I simply would like to have two columns with some background colors applied to be the same height even with different contents.

I thought that using the <spacer> tag with a specific size would be the right choice, but It seems that when I use Litmus, the two columns aren't exactly the same height within OUTLOOK. Which is an issue as It's requested by our designers.

Here is the result within Outlook 2013 using Litmus:

columns don

Here is the code I used to achieve this result:

  <row>
        <columns large="6">
          <callout class="primary">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Curabitur dignissim in turpis in feugiat. Proin sem orci, varius eu justo a,
            blandit rhoncus urna. Aliquam erat volutpat. Quisque in diam vel massa ultricies
            venenatis vitae nec lorem. Nullam a dolor a ante ultrices bibendum ullamcorper eu ante.
            Phasellus vestibulum at eros non efficitur. Curabitur orci magna, venenatis at turpis non, maximus sollicitudin
            felis
          </callout>
         </columns>
         <columns large="1">

          </columns>

          <columns large="6">
            <callout class="secondary">
              Suspendisse elementum diam id est ullamcorper consectetur.
              Nulla sagittis eget lacus ut efficitur. Ut sit amet cursus turpis, at commodo lacus.
              <spacer size="180"></spacer>
            </callout>
          </columns>
      </columns>
  </row>

This failure 's led me to find another solution to have two columns of the same height, whatever the content of these ones. I thought that would be a good idea to apply a background color to a table, and then within this table set 3 columns. The one in the middle would be used as a gutter with a white background.

This work, but the problem with this solution is that the column in the middle takes too much space, this one is too wide.

While the space iof this column should be the same as a gutter in fact. It's quite normal, as this column in the middle which has a large-1 class.

This solution could work If I could add another class such has "large-0.5" and then to set "5.5" to the column on the left and right. This way my column in the middle would have the approximately the width I want.

Here is a screenshot:

 

 

Here is the code (inline styles are there for troubleshooting quickly);

 

  <row>
    <columns>
      <row style="background-color:red;" class="collapse">


      <columns large="5">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Curabitur dignissim in turpis in feugiat. Proin sem orci, varius eu justo a,
        blandit rhoncus urna. Aliquam erat volutpat. Quisque in diam vel massa ultricies
        venenatis vitae nec lorem. Nullam a dolor a ante ultrices bibendum ullamcorper eu ante.
        Phasellus vestibulum at eros non efficitur. Curabitur orci magna, venenatis at turpis non, maximus sollicitudin
        felis.
      </columns>
      <columns large="1" style="background-color:white;">

      </columns>
      <columns large="5">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Curabitur dignissim in turpis in feugiat. Proin sem orci, varius eu justo a,
        blandit rhoncus urna. Aliquam erat volutpat. Quisque in diam vel massa ultricies
        felis.
      </columns>
    </row>
    </columns>

</row>

 

If there is a solution to make it working under outlook, using the spacer I don't mind at all. It's even better...

So, does anyone could help me please ? I'm kind of stuck at the moment even with all the things I've tried.

 

EDIT: In the meantime I 've simply tried to set a fixed height for both columns and it seems to works well for most webmail clients.

However, if there is a solution that helps to achieve the same result, without having to adapt the css eachtime I use the template, this could be cool. I haven't thought to do that directly, because previously when not using foundation for emails, dealing with the height property causes a lot of inconsistencies. Foundation for emails seems to take care of these issues when using it, which is great.

GO about 3 years ago

Honestly, I haven't thought about doing it this way. I might give a try and maybe apply the css using a class. Then using a media query to set the width of the columns according the size of the viewport.

 

I'll let you know...

Corey Schaaf about 3 years ago

Have you thought about just writing your own table HTML? One of the great things about inky is you can write your own table markup in conjunction with the Inky Markup. I'm not saying the solution below will work for you - but might give you a different approach to solving the problem. 

For example

 

<container>

<row>

    <column>

        <table>

            <tr bgcolor="white">

               <td style="width:49%; min-height:150px;" bgcolor="red"></td>

               <td style="width:2%;">&nbsp;</td>

               <td style="width:49%; min-height:150px;" bgcolor="green"></td>

            </tr>

        </table>

    </column>

</row>

</container>