[HTML] Layout multicolonna (no table)

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
Ciao a tutti!
Sto progettando uno dei miei primi siti, prevalentemente ancora molto statico, poichè sto apprendendo in questi tempi javascript and php.
Allora ho impostato un layout a tre colonne con rispettivamente 25 50 e 25 % di larghezza, all'interno di un div con 90% di larghezza.
Dal codice attuale non riesco a far si che l'altezza delle colonne risulti uguale (non mi piace impostare i parametri precisi in px, poichè per il passaggio alla versione mobile non è il massimo).

ESISTE UN MODO PER FAR SI CHE LE COLONNE MANTENGANO LA STESSA ALTEZZA NONOSTANTE CONTENGANO CONTENUTI DI DIVERSA LUNGHEZZA?

Dal codice attuale ottengo la seguente formattazione
HTML
Codice:
<div id="cln">
            <div id="clnsx"><h1>colonna sx</h1></div>
            <div id="clncnt"><h1>colonna cnt</h1></div>
            <div id="clndx"><h1>colonna dx</h1></div>
            <br class="clear">
        </div>
CSS
Codice:
/*contenitore*/
#cln{
    
    text-align:center;
    position:absolute;
    top:150px;
    width:90%;
    left:5%;
    right:5%;
    
    margin: 0 auto;
    text-align:left;}   

/*colonna di sinistra*/
#clnsx{
    width:25%;
    float:left;
    background-color:yellow;
}

/*colonna centrale*/
#clncnt{
    width:50%;
    float:left;
    background-color:red;
}

/*colonna di destra*/
#clndx{
    width:24%;
    float:left;
    background-color:blue;
    }

.clear{
    clear:both;
}
 

Allegati

  • g901.PNG
    g901.PNG
    8,8 KB · Visite: 366
Ultima modifica:

Discussioni simili