Hi All

Spring has sprung and another problem beckons! 

I am trying to align my columns, so from the screenshot taking the Cafe Pages, I want my Read More button to be the full width under the image of the sandwich and for the 2 columns to line up. So the third image down (a shot of Mars!) should be lined up with the News Text.

Here's the code:

<div class="column w220 gut30">

<div class="box">

<div class="column w110">

@foreach(var page in CurrentPage.Children.Where("Visible && DocumentTypeAlias == @0 ||DocumentTypeAlias == @1", "Cafe", "Chapter"))

{

HtmlString summary = new HtmlString("");

dynamic image = null;

foreach(var apage in page.Children.Reverse().Take(1))

{ 

summary = apage.summary;

if (apage.HasValue("image"))

{   

var dynamicMediaItem = Umbraco.Media(apage.image);

<div class="box">

<img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name" width="100" float:left/>

</div>

}

}

}

        </div>

<div class="column w110">

@foreach(var page in CurrentPage.Children.Where("Visible && DocumentTypeAlias == @0 ||DocumentTypeAlias == @1 ", "Cafe", "Chapter"))

{

//HtmlString readMore = new HtmlString("");

HtmlString summary = new HtmlString("");

dynamic image = null;

foreach(var apage in page.Children.Reverse().Take(1))

{ 

summary = apage.summary;

//readMore = apage.Url;

<div class="box">

<div class="section">

<span style="line-height: 1.4em; font-size: 16px; font-weight: bold;">@page.Name</span>

<p>@summary</p>

<p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">Read more...<span class="arrow"></span></a></p>

</div>

</div>

}

}

        </div>

<!-- Read More Button here -->

</div>

</div>

Thanks :)

Tony