Layout multi-colonna con float

Contenuto alternativo per i browser che non leggono gli iframe.
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Elenco Tutorial</title>

<style type="text/css">

body {
 width: 950px;
 font-family: Arial, Verdana, sans-serif;
 color: #665544;
 margin: auto;
 }
h1 {
 background-color: #efefef;
 margin: 20px 0 20px;
 padding: 15px;}
h2 {
 text-align: center;
 padding: 5px;}
p{
 width: auto;
 margin: 0px;
 }
hr {
 border: 0;
 width: 100%;
 color: #000000;
 background-color: #000000;
 height: 1px;
 }

#menu ul {
 padding: 0;
 margin: 0;
 z-index: 1000;}

#menu li {
 position: relative;
 float: left;
 width: 190px;
 text-align: center;
 list-style: none;
 }
#menu li a {
 background-color: #454545;
 color: #FFF;
 padding: 15px 20px;
 text-decoration: none;
 display: block;
 }
#menu li a:hover {
 background-color: #0186ba;
 text-shadow: 0px 0px 1px #FFF;
 }
#menu ul ul {
 position: absolute;
 top: 48px;
 visibility: hidden;
 }
#menu ul li:hover ul {
 visibility: visible;
 }
#menu ul ul:hover {
 box-shadow: 0px 20px 30px #7C7C7C;
 }
#menu ul ul li a {
 background-color: #3A3A3A;
 }
#menu ul ul li a:hover {
 background-color: #0186ba;
 }
.vertical-menu {
 width: 430px; /* Set a width if you like */
 margin: 0 auto;
 }

.vertical-menu a {
 background-color: #eee; /* Grey background color /
 color: black; / Black text color /
 display: block; / Make the links appear below each other /
 padding: 12px; / Add some padding /
 text-decoration: none; / Remove underline from links */
 }

.vertical-menu a:hover {
 background-color: #ccc; /* Dark grey background on mouse-over */
 }

.vertical-menu a.active {
 background-color: #4CAF50; /* Add a green color to the "active/current" link */
 color: white;
 }

.column1of2 {
 float: left;
 width: 455px;
 margin: 10px;}
.column2of2 {
 float: left;
 width: 455px;
 margin: 10px;}

</style>

</head>

<body>
<h1 align='center'>Elenco Tutorial</h1></p>

<div id="menu">
 <!-- Lista generale -->
 <ul>
 <!-- 1° Elemento -->
 <li><a href="#">Punto Informatico</a></li>
 <!-- 2° Elemento -->
 <li><a href="#">Texbuntu tutorial</a></li>
 <!-- 3° Elemento: (Sottomenu) -->
 <li><a href="#">LyX tutorial</a>
 <ul>
 <li><a href="#">LyX</a></li>
 <li><a href="#">Tutorial</a></li>
 <li><a href="#">Homepage LyX</a></li>
 </ul>
 </li>

 <li><a href="#">Markdown tutorial</a></li>
 <li><a href="#">Html tutorial</a></li>
 </ul>
</div>
<br>
<br>
<br>
<br>

<div class="column1of2">
<h2> LyX </h2>

<p align='justify'> LyX è un word processor multi-piattaforma open source che potete usare con linux, Windows o col Mac.
E' uno dei programmi più usati dagli studenti all'università per scrivere le tesi. Questo perché oltre a permettere
di fare lavori di impaginazione all'altezza di lavori professionali consente di risparmiare molto tempo. </p>

</div>

<div class="column2of2">
<h2> Immagina </h2>
<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. Da solo crea l'indice indicando i numeri di
pagina e se in seguito noi andiamo a modificare il nostro documento lui aggiorna l'indice automaticamente.
Potete immaginare che bel risparmio di tempo non dover creare l'indice manualmente e non doverlo aggiornare manualmente
per ogni modifica che noi facciamo al documento.</p>

</div>

</body>

</html>
Guida creare con i CSS

Guida creare con i CSS

Layout multi-colonna con float

Codice HTML intera pagina web
