Layout 3 colonne - Perchè le due colonne non vengono giu insieme al contenuto?
Salve a tutti...
ormai son 3 giorni che sbatto la testa... ma come diavolo devo fare perchè quelle due colonne scorrano insieme al contenuto??!
Ho una pagina dinamica, che si riempirà sempre di più di contenuto, quindi non posso impostare un height fisso.
Ho impostato sul foglio di stile per html, body, la classe del contenitore globale, la classe de contenitore del contenuto e delle due colonne e per le classi delle due colonne un height: 100%.
Così APPARENTEMENTE sembra funzionare, infatti (con il padding e il margin del body su 0px) sembra che le colonne e il contenuto si allunghino.
Ma basta smuovere i bordi della finestra del browser, per rendersi conto che non si espandono con il contenuto, ma vanno a fare proprio quello che gli chiedo: andare al 100%...si ma della pagina.
Se imposto quella proprietà su auto il div del contenuto si espande, tutti i div si espandono, meno quelli delle due colonne.
la pagina incriminata è www.fixg.net/prova/
Codice CSS (non validato) --Ho omesso qualcosina per rendervi la lettura più semplice--
Codice:
html{
height: 100%;
}
body{
background-color: white;
font-family: Arial, serif;
font-size: 13px;
text-align: center;
margin-bottom: 0px;
padding-bottom: 0px;
height: auto;
}
.contenitore{
width: 100%;
height: 100%;
}
.header{
width: 850px;
height: 150px;
margin-left: auto;
margin-right: auto;
background: white url(header.png) no-repeat top left;
}
.basso{ /*footer*/
width: 850px;
height: 80px;
clear: both;
margin-left: auto;
margin-right: auto;
background:white url(bottom.png) no-repeat top left;
}
.contenitore_basso{
width: 850px;
height: 100%;
text-align:center;
margin-right: auto;
margin-left: auto;
}
.colonna_sx{
float: left;
width: 172px;
height: 100%;
background: url(bord_sx.png) repeat-y left;
}
.contenuto{
float: left;
text-align: left;
background: url(sf_cont.png) repeat top left;
width: 460px;
padding: 5px;
height: 100%;
}
.colonna_dx{
float:left;
width: 178px;
height: 100%;
background: url(bord_dx.png) repeat-y right;
}
E il codice HTML
Codice HTML:
<html>
<head>
<title>FixG.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="contenitore">
<div class="header">
<div class="pulsanti">
<a class="botn" href="index.php">home</a><a class="botn" href="index.php?c=leggi&tipo=news">novità</a><a class="botn" href="index.php?c=leggi&tipo=offerte">offerte</a><a class="botn" href="index.php?c=contatti">contattaci</a>
</div>
</div>
<div class="contenitore_basso">
<div class="colonna_sx">
<div class="titolo">
Offerte
</div>
</div>
<div class="contenuto">
<a href="#">LINK></a>
contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="colonna_dx">
<div class="titolo">
Novità
</div>
<div class='cont_col_dx' style='margin-left: 0px; width: 166px;'><b>CIAO</b><br /> inserimento <img src=' prova2.jpg ' border=0 /> prova prova inserimento prova inserimentoprova inserimento prova inserimento</div> </div>
</div>
<div class="basso"></div>
</div>
</body>
</html>
Quanto vorrei che mi aiutaste...grazie !
