Menu icon Foundation
Is there a way to stack/nest columns inside each other?

Hi,

So I am trying to get two content blocks inside a side bar as seen in the code I have one column that is large="4" this creates a sidebar. Then a main content on the right of 8, I am wanting to have two content blocks in the sidebar, one aligned to the top and the other at the bottom.

I understand that the code below is incorrect as this creates me 3 columns in the row but it shows what I mean the best way I can.

Cheers

Nick

<row>
	<columns class="side-contact-us" small="12" large="4" valign="top">
		<h4>Contact Us</h4>
		<p>To talk to us about your requirements or to arrange a viewing, contact:</p>
		<p>John Doe</p>
		<p>Brown Estates</p>
		<p><a href="">xxx-xxx-xxxx</a></p>
		<p><a href="">jon.doe@doe.com</a></p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi a ullam atque mollitia consequuntur incidunt accusantium! Dolore harum praesentium, porro, perferendis saepe magnam, assumenda quam reiciendis nisi suscipit totam necessitatibus.</p>
		<p><a href="">www.jd.co.uk</a></p>
	</columns>
	<columns class="side-contact-us" small="12" large="4" valign="bottom">			
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores labore maxime non nam et rem tempore.</p>
		<p>voluptatem culpa odit vitae atque quisquam ex ratione. Molestiae nesciunt mollitia recusandae dolores vitae.</p>
		<p>voluptatem culpa odit vitae atque quisquam ex ratione. Molestiae nesciunt mollitia recusandae dolores vitae.</p>
	</columns>
	<columns small="12" large="8">
		<h4>Main Message</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque maiores veniam enim consequuntur quis nostrum, quasi iure? Praesentium exercitationem neque totam minus provident eum ad aut quae maiores qui.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque maiores veniam enim consequuntur quis nostrum, quasi iure? Praesentium exercitationem neque totam minus provident eum ad aut quae maiores qui.</p>
	</columns>
</row>

emailsnested

Hi,

So I am trying to get two content blocks inside a side bar as seen in the code I have one column that is large="4" this creates a sidebar. Then a main content on the right of 8, I am wanting to have two content blocks in the sidebar, one aligned to the top and the other at the bottom.

I understand that the code below is incorrect as this creates me 3 columns in the row but it shows what I mean the best way I can.

Cheers

Nick

<row>
	<columns class="side-contact-us" small="12" large="4" valign="top">
		<h4>Contact Us</h4>
		<p>To talk to us about your requirements or to arrange a viewing, contact:</p>
		<p>John Doe</p>
		<p>Brown Estates</p>
		<p><a href="">xxx-xxx-xxxx</a></p>
		<p><a href="">jon.doe@doe.com</a></p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi a ullam atque mollitia consequuntur incidunt accusantium! Dolore harum praesentium, porro, perferendis saepe magnam, assumenda quam reiciendis nisi suscipit totam necessitatibus.</p>
		<p><a href="">www.jd.co.uk</a></p>
	</columns>
	<columns class="side-contact-us" small="12" large="4" valign="bottom">			
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores labore maxime non nam et rem tempore.</p>
		<p>voluptatem culpa odit vitae atque quisquam ex ratione. Molestiae nesciunt mollitia recusandae dolores vitae.</p>
		<p>voluptatem culpa odit vitae atque quisquam ex ratione. Molestiae nesciunt mollitia recusandae dolores vitae.</p>
	</columns>
	<columns small="12" large="8">
		<h4>Main Message</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque maiores veniam enim consequuntur quis nostrum, quasi iure? Praesentium exercitationem neque totam minus provident eum ad aut quae maiores qui.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque maiores veniam enim consequuntur quis nostrum, quasi iure? Praesentium exercitationem neque totam minus provident eum ad aut quae maiores qui.</p>
	</columns>
</row>
Matt Smith over 2 years ago

What you need to do is nest you columns inside the sidebar column. The following should do the trick:

<row>
    <columns small="12" large="4">
      <row>
        <columns class="side-contact-us" large="12">
          <h4>Contact Us</h4>
          <p>To talk to us about your requirements or to arrange a viewing, contact:</p>
          <p>John Doe</p>
          <p>Brown Estates</p>
          <p><a href="">xxx-xxx-xxxx</a></p>
          <p><a href="">jon.doe@doe.com</a></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi a ullam atque mollitia consequuntur incidunt accusantium! Dolore harum praesentium, porro, perferendis saepe magnam, assumenda quam reiciendis nisi suscipit totam necessitatibus.</p>
          <p><a href="">www.jd.co.uk</a></p>
        </columns>
      </row>
      <row>
        <columns class="side-contact-us" large="12">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores labore maxime non nam et rem tempore.</p>
          <p>voluptatem culpa odit vitae atque quisquam ex ratione. Molestiae nesciunt mollitia recusandae dolores vitae.</p>
          <p>voluptatem culpa odit vitae atque quisquam ex ratione. Molestiae nesciunt mollitia recusandae dolores vitae.</p>
        </columns>
      </row>
    </columns>
    <columns small="12" large="8">
      <h4>Main Message</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque maiores veniam enim consequuntur quis nostrum, quasi iure? Praesentium exercitationem neque totam minus provident eum ad aut quae maiores qui.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque maiores veniam enim consequuntur quis nostrum, quasi iure? Praesentium exercitationem neque totam minus provident eum ad aut quae maiores qui.</p>
    </columns>
  </row>

Hope that helps :)

 

Matt

Nick Beswick over 2 years ago

Hi Matt

Thank you for that that worked :-) another quick question if you don't mind.

The two side-contact-us columns nested inside can these be valign="top" and valign="bottom" ?

thanks

Nick

Matt Smith over 2 years ago

Hi Nick,

 

I wasn't 100% sure as html in emails can be very limited...however as its all just tables, it turns out you can. You would just add the 'valign' to the appropriate <columns>.

You can take look here https://foundation.zurb.com/emails/docs/alignment.html#vertical-alignment where its described how to do this either via html or inky.

 

If you are having trouble getting it to work though, I would take a guess at saying the issue would be the height of the column your sidebar elements are nested in as it might not be equal to the height of the main body column.

Matt