[css] altezza div che si adatta
Salve.
Dopo la prima prova (fallita) in css, ne sto facendo un'altra.
Sono arrivato a fare questo:
Codice HTML:
<!doctype html>
<html>
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>titolo</title>
<link href="./stile.css" rel="stylesheet" type="text/css" media="screen" />
<!--
Per adesso inesistente ^^
<link rel="icon" href="immagini/favicon.png" type="image/png">
-->
</head>
<body>
<div id='mega_contenitore'>
<div id='alto'>alto</div>
<div id='spazio'>spazio</div>
<div id='dx'>dx</div>
<div id='contenuto'>centrale</div>
<div id='sx'>sx</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
con le regole:
Codice:
body
{
text-align:center;
}
/*MEGA contenitore*/
#mega_contenitore
{
margin:0 auto;
padding:0;
margin-top:0px;
width:1024px;
background:#00FF00;
}
/*Supercontenitori*/
/*
#alto,#spazio,#contenuto,#dx,#sx
{
border:medium #333333 solid;
}
*/
#alto
{
margin-top:0px;
height:120px;
background:#0000FF;
}
#spazio
{
margin-top:0px;
height:10px;
background:#FF0000;
}
#contenuto
{
margin-top:0px;
width:684px; /*auto? 100%?*/
float:right;
background:#FFFF00;
}
#dx
{
margin-right:0px;
float:right;
width:170px;
background:#9933CC;
}
#sx
{
margin-left:0px;
float:left;
width:170px;
background:#FF9900;
}
#footer
{
margin-right:0px;
}
Come si può vedere, funziona alla perfezione :razz:
...il problema sorge quando nel div centrale (#contenuto) scrivo o metto degli elementi interni.
Come faccio a far valere l'altezza dei div (#sx) e (#dx) uguale a quella di (#contenuto) ?
(poi ci sarebbe il problema del footer, ma credo che una volta sistemate le altezze di #sx e #dx, anche footer si posizionerà correttamente :wink:
Grazie,
Ciao!
