layout 2 colonne

**aquatimer2000** · 04-08-2009, 16:14

<body>
<div id="box">
<div id="header"> header </div>
<div id="navigazione">navigazione.
</div>
<div id="contenuto">contenuto

contenuto
</div>
<div id="footer"> footer </div>
</div>
</body>

codice:

body{
font-family: arial,sans-serif;
text-align: left;
background-color: #d5d5e3;
}

div#box{
width: 900px;
margin: 0 auto;
text-align: left;
background: url(../immagini/sfondo_navigazione.jpg) repeat-y top left;
}

div#header{
height: 100px;
background-color: #ff0000;
}

div#navigazione{
float:left;
width: 200px;
}

div#contentenuto{
margin-left: 200px;
}

div#footer{
clear:left;
text-align:center;
padding: 0.5em;
background-color: #69c;
color: #000;
}

perchè se la lunghezza del contenuto supera la lunghezza della navigazione, il testo mi va a finire sotto la barra di navigazione?

scusate ma è il mio approccio al CSS;
Ciao!!

**Mich_** · 04-08-2009, 16:27

Non capisco cosa intendi per "sotto la barra di navigazione". Hai una sovrapposizione, o il testo gira attorno al blocco? E cosa e` la "barra" E` la colonna sinistra o una cosa diversa?

Comunque prova a togliere il margin dal contenuto e sostituirlo invece con:
float: left; /* oppure right, ma left dovrebbe dare la soluzione migliore cross-browser */

Poi potrebbe mancarti un
width: 100%;
da inserire nella formattazione dell'oggetto body e dell'oggetto html

**aquatimer2000** · 04-08-2009, 16:44

questo è il nuovo codice:

codice:

html{
width: 100%;
}

body{
width: 100%;
font-family: arial,sans-serif;
text-align: left;
background-color: #d5d5e3;
}

div#box{
width: 900px;
margin: 0 auto;
text-align: left;
background: url(../immagini/sfondo_navigazione.jpg) repeat-y top left;
}

div#header{
height: 100px;
background-color: #ff0000;
}

div#navigazione{
float:left;
width: 200px;
}

div#contentenuto{
float: right;
}

div#footer{
clear:right;
text-align:center;
padding: 0.5em;
background-color: #69c;
color: #000;
}

corretto come mi hai detto ma il problemi rimane:
il testo del div contenuto va a finire sotto la colonna di sinistra (div navigazione)

**aquatimer2000** · 04-08-2009, 16:50

lascia stare sono proprio un

div#contentenuto{
margin-left: 200px;
}

invece che "contenuto"

scusate !

Discussione: layout 2 colonne

Strumenti discussione

Ricerca discussione

Visualizza

layout 2 colonne

Permessi di invio