Two column wide image in three column wide page

I use Foundation 4 in my site. I try to figure out how to make an image span over 2 columns in a 3 columns wide page using the Foundation grid. This is how I want it to look:

Is it at all possible to use nested rows for this?
Here is my html so far (not working):

<div class="row">
<div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>

<div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>

<div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
<div class="row">
<div class="large-8 columns pull-8">
<div><img class="bild" src="myimage.jpg"></div>
</div>
</div>
</div>
</div>


2 Answers
2

You can just like you do in Bootstrap. While your idea is ok - you are better off doing this as it is best practice to code in line with how Foundation was built to be used.

Here is a wireframe example of what i mean: You must next the rows with your structure inside. Parent rows i guess.

<div class="row">
<div class="large-4"></div>
<div class="large-8">
<div class="row">
<div class="large-6"></div>
<div class="large-6"></div>
</div>
<div class="row">
<div class="large-12"></div>
</div>
</div>


Finally found something that works if anyone else is wondering about this. I simply put the image inside normal divs at the end of the 2nd column. By making the image wrapper 200% wide in screen sizes over 768px (and the image itself 100% to make it fill the wrapper) it looks good in all devices. Make sure to upload an image with sufficient resolution to look good, In this case it's 800px wide. Also both the wrapper div and the image should be float:left in bigger screen sizes for this to work.

float:left

If anyone has a better solution, please let me know.

<style>
.bild img
width:100%;


@media only screen and (max-width: 767px)
.bild
width:100%;
margin: 20px 0px;


@media only screen and (min-width: 768px)
.bild
margin:20px 0px;
float:left;
width:200%;


</style>
<div class="row">
<div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem.
</div>

<div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem.

<div class="bild"><img src="myimage.jpg"></div>
</div>

<div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem.
</div>
</div>
</div>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.