Menu icon Foundation
Inky Outlook pushes cols down

Hi, In Outlook, it appears that successive columns in my 3-col layout are being pushed down a bit. I think I'm suffering from a float issue maybe? Image attached. Code below. It's simple code and it works everywhere but Outlook's recent versions... I'm using Inky and would really like to keep using it if possible.

 

Screenshot of three col design with cols getting pushed down

 

Code:

<container>
<row>
<columns large="4">
<a href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank">
<img src="https://images.macmillan.com/folio-assets/macmillan_us_frontbookcovers_186W/9780374537449.jpg" height="250" alt="">
</a>
<spacer size="5"></spacer>


<h5 class="title macmillan-red">Locking Up Our Own </h5>
<h4 class="subtitle no-margin"><em>Crime and Punishment in Black America</em></h4>
<h5 class="author">James Forman Jr.</h5>
<spacer size="5"></spacer>

<h5 class="author">Winner of the Pulitzer Prize </h5>

<spacer size="10"></spacer>
<p>&ldquo;Forman&rsquo;s book is a compelling example of how to do local history . . . Incredibly powerful and
well-researched.&rdquo;&mdash;<em>The Boston Review</em>  </p>
<spacer size="15"></spacer>


<button valign="bottom" href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank"
class="radius text-center macmillan-red-bg no-padding no-margin no-wrap tiny">
Request Exam Copy
</button>

</columns>
<columns large="4">
<a href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank">
<img src="https://images.macmillan.com/folio-assets/macmillan_us_frontbookcovers_186W/9781250153777.jpg" height="250" alt="">
</a>
<spacer size="5"></spacer>


<h5 class="title macmillan-red">The Complacent Class</h5>
<h4 class="subtitle no-margin"><em>The Self-Defeating Quest for the American Dream</em></h4>
<h5 class="author">Tyler Cowen</h5>

<spacer size="15"></spacer>
<p>&ldquo;A useful corrective to the conventional wisdom that American ingenuity, sooner or later, will revive a
low-growth economy.&rdquo;&mdash;<em>The Wall Street Journal </em></p>
<spacer size="15"></spacer>


<button valign="bottom" href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank"
class="radius text-center macmillan-red-bg no-padding no-margin no-wrap tiny">
Request Exam Copy
</button>

</columns>
<columns large="4">
<a href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank">
<img src="https://images.macmillan.com/folio-assets/macmillan_us_frontbookcovers_186W/9781250159304.jpg" height="250" alt="">
</a>
<spacer size="5"></spacer>


<h5 class="title macmillan-red">Age of Anger</h5>
<h4 class="subtitle no-margin"><em>A History of the Present</em></h4>
<h5 class="author">Pankaj Mishra</h5>

<spacer size="15"></spacer>
<p>&ldquo;With powerful and worrisome insights into history, Pankaj Mishra has clarified our present.&rdquo;&mdash;<em>San
Francisco Chronicle</em></p>
<spacer size="15"></spacer>


<button valign="bottom" href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank"
class="radius text-center macmillan-red-bg no-padding no-margin no-wrap tiny">
Request Exam Copy
</button>

</columns>

</row>
</container>

 

 

 

 

 

Outlookinkycolumnsfloat

Hi, In Outlook, it appears that successive columns in my 3-col layout are being pushed down a bit. I think I'm suffering from a float issue maybe? Image attached. Code below. It's simple code and it works everywhere but Outlook's recent versions... I'm using Inky and would really like to keep using it if possible.

 

Screenshot of three col design with cols getting pushed down

 

Code:

<container>
<row>
<columns large="4">
<a href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank">
<img src="https://images.macmillan.com/folio-assets/macmillan_us_frontbookcovers_186W/9780374537449.jpg" height="250" alt="">
</a>
<spacer size="5"></spacer>


<h5 class="title macmillan-red">Locking Up Our Own </h5>
<h4 class="subtitle no-margin"><em>Crime and Punishment in Black America</em></h4>
<h5 class="author">James Forman Jr.</h5>
<spacer size="5"></spacer>

<h5 class="author">Winner of the Pulitzer Prize </h5>

<spacer size="10"></spacer>
<p>&ldquo;Forman&rsquo;s book is a compelling example of how to do local history . . . Incredibly powerful and
well-researched.&rdquo;&mdash;<em>The Boston Review</em>  </p>
<spacer size="15"></spacer>


<button valign="bottom" href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank"
class="radius text-center macmillan-red-bg no-padding no-margin no-wrap tiny">
Request Exam Copy
</button>

</columns>
<columns large="4">
<a href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank">
<img src="https://images.macmillan.com/folio-assets/macmillan_us_frontbookcovers_186W/9781250153777.jpg" height="250" alt="">
</a>
<spacer size="5"></spacer>


<h5 class="title macmillan-red">The Complacent Class</h5>
<h4 class="subtitle no-margin"><em>The Self-Defeating Quest for the American Dream</em></h4>
<h5 class="author">Tyler Cowen</h5>

<spacer size="15"></spacer>
<p>&ldquo;A useful corrective to the conventional wisdom that American ingenuity, sooner or later, will revive a
low-growth economy.&rdquo;&mdash;<em>The Wall Street Journal </em></p>
<spacer size="15"></spacer>


<button valign="bottom" href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank"
class="radius text-center macmillan-red-bg no-padding no-margin no-wrap tiny">
Request Exam Copy
</button>

</columns>
<columns large="4">
<a href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank">
<img src="https://images.macmillan.com/folio-assets/macmillan_us_frontbookcovers_186W/9781250159304.jpg" height="250" alt="">
</a>
<spacer size="5"></spacer>


<h5 class="title macmillan-red">Age of Anger</h5>
<h4 class="subtitle no-margin"><em>A History of the Present</em></h4>
<h5 class="author">Pankaj Mishra</h5>

<spacer size="15"></spacer>
<p>&ldquo;With powerful and worrisome insights into history, Pankaj Mishra has clarified our present.&rdquo;&mdash;<em>San
Francisco Chronicle</em></p>
<spacer size="15"></spacer>


<button valign="bottom" href="https://goo.gl/forms/3sjQq3eIqQzXWEpz1" target="_blank"
class="radius text-center macmillan-red-bg no-padding no-margin no-wrap tiny">
Request Exam Copy
</button>

</columns>

</row>
</container>

 

 

 

 

 

Andrew Ayala over 1 year ago

Ok, I'm stupid, but I'm still blaming Outlook. To top align multiple columns in a row in Outlook, add the valign attribute set to top to each column. Like this: <columns valign="top">