PDA

View Full Version : [CSS] Semplice colonna a sinistra

VegetaSSJ5
19-06-2011, 22:30
L'idea è semplice: header, contenuto e footer.
Nel contenuto c'è un menu a sinistra che deve essere alto quanto il contenuto. Perchè per fare ciò sto diventando matto?
Incollo qui il codice della pagina e uno screenshot di come la vedo con firefox. Io vorrei che il menu rosso sia alto come tutto il contenuto e che ovviamente si adatti in altezza se il contenuto si allunga. Qualcuno mi sa aiutare?

EDIT
Dopo varie peripezie sono giunto più o meno alla versione finale, però le visualizzazioni con IE9 e Firefox sono differenti. Con Firefox la visualizzazione è corretta. Con IE no, in special modo ci sono dei fastidiosi spazi verticali tra le varie parti del layout. Si può risolvere in qualche modo?

-----> Visualizzazione con Internet Explorer 9 (http://i52.tinypic.com/x248ev.jpg) <-----
-----> Visualizzazione con Mozilla Firefox 5 (http://i53.tinypic.com/16apgqu.jpg) <-----

<html>
<head>
<style type="text/css">
#header {
min-height: 100px;
background-color: blue;
}

#main {
background-color: silver;
}

#footer {
min-height: 100px;
background-color: grey;
clear: both;
}

#leftmenu {
width: 10%;
background-color: red;
}

#content {
background-color: yellow;
}

#leftmenu, #content {
height: auto;
float: left;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="main">
<div id="leftmenu">
<h3>Left Menu</h3>
</div>
<div id="content">
<h3>Content</h3>
</div>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</body>
</html>
ndakota
20-06-2011, 08:04
Prova con qualcosa tipo


#leftmenu, #content {
height: 100%;
float: left;
}
VegetaSSJ5
20-06-2011, 10:11
ehm... no!
ho aggiornato l'immagine e il codice al primo post...
VegetaSSJ5
21-06-2011, 15:35
up!
Efem
23-06-2011, 12:40
Ciao, il cambiamento da fare è qui


#leftmenu, #content {
height: auto;
min-height:300px;
float: left;
}


Ciao :)
VegetaSSJ5
23-06-2011, 13:19
Grazie mille Efem!
ora il layout c'è... ho fatto qualche altra piccola modifica al css per renderlo minimale. però explorer mi visualizza degli spazi tra le varie parti del layout, invece firefox le visualizza bene... il codice aggiornato e le immagini sono al primo post.