• User Newbie

    Usare position: absolute in zurb foundation

    Buonasera a tutti,

    Spero di aver scelto la sezione giusta per questa domanda - appena iscritto, abbiate pazienza se non ho afferrato bene tutte le regole del forum.

    Sto sviluppando sito con Zurb Foundation e mi chiedevo se esiste un equivalente di .killer in foundation. Il mio problema è il seguente:

    ho tre div .columns inseriti all'interno di un div .row, dei quali il div .columns centrale è il più alto dei tre; io ho bisogno di fissare il primo .columns al fondo del div .row, così da lasciare uno spazio vuoto in alto (per il testo) e allineare i primi due div .columns alla base del div row. Ho provato dando al div .row position:relative e al primo div .columns position:absolute e bottom:0, ma così facendo il primo div .columns esce dal flusso e gli altri due mi si spaginano. Normalmente risolverei il problema con un div .killer, ma mi pare di capire che Foundation abbia i sui killer ed è un rischio andarne a inserire di nuovi.

    Ricopio qui sotto il codice sorgente e il relativo css, ridotti all'osso per semplificare la comprensione.

    Codice sorgente:
    <div class="row secondBand">

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

    </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;}

    Il problema, appunto, è che ancorando .large-4.columns.leftCol al fondo di .row.secondBand gli altri .large-4.columns si allargano nella pagina e .large-4.columns.central si sovrappone a .large-4.columns.leftCol.

    C'è nessuno che sappia come risolvere questo problema usando le classi di Foundation?

    Se il testo non è chiaro, chiedete pure.

    Grazie mille!