Layout a due colonne responsive






Osservando questo esempio nel browser selezionando qui. Provate poi ad alterare la larghezza della finestra, stringendola ed estendendola. Vedrete le colonne spostarsi all'interno della finestra del browser secondo la larghezza della finestra.

Codice HTML

<h1 align='center'>Layout a due colonne</h1>

<div class="column"> <h3> LyX </h3> <p align='justify'> LyX รจ un word processor multi-piattaforma open source che potete usare con linux, Windows o col Mac. </p> </div>

<div class="column"> <h3> Immagina </h3> <p align='justify'> Immaginate poter scrivere un documento come un libro o una lunga tesi divisa in capitoli, sezioni e sottosezioni. Poi si dice al programma di creare l'indice e lui lo crea. </p> </div>



Codice CSS

body {
 width: 97%;
 font-family: Arial, Verdana, sans-serif;
 color: #000000;
 margin: auto;}

p { margin: 3%;}

h1, h2, h3 { text-align: center}

/* Create four equal columns that floats next to each other */ .column { float: left; width: 50%; }

/* Clear floats */ .row:after { content: ""; display: table; clear: both; }

/* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 900px) { .column { width: 50%; } }

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } }