Using position:absolute in Zurb Foundation

[Marco_Bors]

Hi everybody,

I’m new here and hope somebody can help.

I’m developing a website with Zurb Foundation and I was wondering if anybody knows an equivalent of .killer in Foundation. I’ve got the following problem:

I have three div.columns in a div.row; the central div.columns is the tallest. I need to anchor the first div.columns to the bottom of div.row, so that there is a blank space above it (for text) and the first two div.columns are both aligned at the bottom of div.row.
I have tried giving position:relative to div.row and position:absolute; bottom:0 to the first div.columns; however, by doing so the second and third div.columns move around and overlap the first one. I would normally solve the problem with a .killer, but I hear that Foundation has its own .killers and creating new ones might mess it up.

I’m copying the source code and css below, simplified for your convenience.

Source code:

< div class = "large-4 columns leftCol" >
< h2 >Gli ultimi prodotti< /h2 >
< div class = " orbit-container slideshow-wrapper " > *qui c’è uno slider orbit* < /div >

< div class = " large-4 columns central " >
< div class= " banner " > img < /div >
< div class = " banner " > img < /div >
< div class = " banner " > img < / div >
< / div >

< div class = " large-4 columns " >
< div class = " banner " > img < / div >
< div class = " banner " > img < / div >
< / div >
< / div >

CSS:
.row.secondBand {padding: 0; position: relative;}

.row.secondBand .large-4.columns {width: 30%; padding: 0;}

.row.secondBand .large-4.columns.leftCol {position: absolute; bottom: 0;}

.row.secondBand .large-4.columns.central {margin: 0 5%;}

.row.secondBand .large-4.columns .banner {position: relative; clear: both; margin-bottom: 2em;}

Again, the problem is that anchoring .large-4.columns.leftCol to the bottom of .row.secondBand, the remaining .large-4.columns expand in the page and .large-4.columns.central overlaps .large-4.columns.leftCol.

Does anybody know how to solve this problem using Foundation’s own classes?

If I have not been clear, please ask for info.

Thanks a lot!

[Paulie_D]

Please put the code into Codepen so we can see what is happening.

[Author]

Posts