Layout 3 colonne con float

**furly** · 25-08-2014, 12:46

Ho un file index con tre colonne definite nel css come segue:

codice:

#main {margin: 0 auto; width: 900px; background: #fff;}
#left {width: 180px; float: left; padding: 10px 0 0 10px; height: 100%;}
#center {width: 570px; float: center; padding: 10px 0 0 0; text-align: justify; height: 100%;}
#right {width: 150px; float: right; padding: 10px 10px 0 0; height: 100%;}

Il file index.php invece è così formato:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="left">Lorem ipsum</div>
<div id="center">Lorem ipsum</div>
<div id="right">Lorem ipsum</div>
</div>
</body>
</html>

Come mai pur facendo la somma delle colonne (180+570+150=900) la colonna "right" non rientra nell'intero sito?
Sto impazzendo...
Grazie delle eventuali risposte.

**Prill** · 25-08-2014, 17:24

margini, padding e bordi vanno a sommarsi alla larghezza. Nel tuo caso sono i padding a rendere i tre div più larghi di 900px e quindi a mandare quello destro in basso

**furly** · 25-08-2014, 18:06

Hai ragione, che pirla che sono stato!
Pensavo che solo gli eventuali valori di margin potessero influire sulle larghezze e non il padding.
Potevo almeno provare!
Grazie.

**Vincent.Zeno** · 25-08-2014, 18:13

float:center non esiste

**Prill** · 25-08-2014, 18:49

Originariamente inviata da Vincent.Zeno

float:center non esiste

però sarebbe bello se esistesse

e perciò @furly fra le modifiche sarà pure da mettere un float:left al div centrale oppure non specificare alcun float ma farlo risalire assegnandogli margini destro e sinistro pari alla larghezza delle colonne laterali

**furly** · 26-08-2014, 09:04

Grazie a tutti.

Discussione: Layout 3 colonne con float

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Layout 3 colonne con float

Permessi di invio