Creare dei contenuti affiancati

Per prima cosa copia e incolla il codice css, potrai modificare le misure, colori a tuo piacimento.


<style type="text/css"> html,body{margin:0;padding:0} div#multi ul,div#multi li{margin:0;padding:0;list-style:none} div#multi{width: 100%;overflow: hidden; /* simple clearing of floats */ padding: 0em 0;margin:1em 0; line-height: 1.8; background: #FFF} div#multi h3{font:180% "Trebuchet MS",Arial,sans-serif; margin: 0.1em 0;color:#FFF; border-bottom:1px dotted #FFF} div#multi ul,div#multi li{margin:0;padding:0;list-style:none} div#multi div{float:left;width:32%; margin-left: 1%;display:inline; /* per evitare il float double margin bug di IE*/ } div#multi li{border-bottom:1px dotted #FFF} div#multi a{display:block;color: red; height: auto !important;height: 1%; /*holly hack semplificato per IE*/ text-decoration:none;padding-left:12px; background: transparent url(http://www.tuttohtml.it/immahini/bullet_web.png) no-repeat center left} div#multi a:hover{background-color: #FFF;color:red} </style>


Passiamo alla parte html della questione, i div saranno 3 tutti affiancati e con un piccolo bullet lateralmente ai link, ma che potrai modificare o eliminare a tuo piacimento.

<div id="multi"> <div> <ul> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> </ul> </div> <div> <ul> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> </ul> </div> <div> <ul> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> <li><a href="#">Nessun Elemento</a></li> </ul> </div> </div>