Salve a tutti,
stavo cercando di fare un piccolo blog utilizzando xhtml e i css, solo che mi sn trovato di fronte a questo problema che non so proprio risolvere. In pratica ho creato un contenitore chiamato "contenuto" al cui interno sono presenti tre colonne , quella sinistra, quella destra e quella dei post.
Il problema è che questo contenitore non modifica la sua altezza in base a quella degli oggetti contenuti, se fisso l' altezza manualmente funziona altrimenti no. Potreste darci un' occhiata?
Grazie mille.
codice HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titolo</title>
<link type="text/css" rel="stylesheet" href="mainstyle.css" />
</head>
<body>
<div id="sezprinc">
<div id="testata">
</div>
<div id="contenuto">
<div id="colonna_sinistra">
<h1>About Me</h1>
.....</p>
<h1>Links</h1>
.....</p>
<h1>Friends</h1>
.....</p>
</div>
<div id="post">
<h2>Titolo</h2>
<h3>Data</h3>
ppppppppppppppppppppppppppppppppppppppp</p>
pppppppppppppppppppppppppppppppppppppppp</p>
pppppppppppppppppppppppppppppppppppppppp</p>
ppppppppppppppppppppp</p>
</div>
<div id="colonna_destra">
<h1>Archivio</h1>
....</p>
<h1>Amo</h1>
....</p>
<h1>Odio</h1>
....</p>
</div>
</div>
<div id="clear">
</div>
<div id="footer">
...</p>
</div>
</div>
</body>
</html>
CODICE CSS
body {
background-color:#9CF;
color:#FFF;
text-align : center;
margin:9px 9px 0 9px;
}
#sezprinc{
background: #9CF;
color:#FFF;
margin: 0px 20px;
padding: 0px;
width: 600px;
text-align : left;
}
#testata{
background-image:url(Vista%20Flow.jpg);
height: 140px;
text-align : center;
font-size:24px;
}
#contenuto{
background:#FFF;
color:#000;
width: 600px;
border-bottom : #CCCCCC 0px dotted;
border-left : #CCCCCC 0px dotted;
border-right : #CCCCCC 0px dotted;
border-top : #CCCCCC 0px dotted;
}
#clear {
clear: both;
}
#colonna_sinistra{
float: left;
background:#99F;
color:#000;
margin: 5px 5px;
border: 1px solid black;
padding: 2px 2px;
width: 150px;
}
#post{
float:left;
background: #FFF;
color: #000;
width:250px;
border: 1px solid black;
margin: 10px 5px 10px 5px;
padding: 2px 2px;
}
#colonna_destra{
float:left;
background:#99F;
color:#000;
margin: 5px 5px 5px 5px;
border: 1px solid black;
padding: 2px 2px;
width: 150px;
}
#footer{
background:#003;
color:#FFF;
border: 1px solid black;
margin: 5px;
text-align:left;
}
#colonna_sinistra h1{
border: 1px solid Black;
background: trasparent;
font:Georgia, "Times New Roman", Times, serif;
font-styleblique;
font-size:14px;
width: auto;
text-align: center;
margin: 10px 20px;
}
#colonna_sinistra p{
background: trasparent;
font:Georgia, "Times New Roman", Times, serif;
font-size:10px;
text-align:left;
margin: 2px 10px;
}
#post h2{
background:trasparent;
font:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:center;
font-weight:100;
margin:2px 5px;
}
#post h3{
background:trasparent;
font:Georgia, "Times New Roman", Times, serif;
font-size:12px;
text-align:right;
margin:2px 5px;
}
#post p{
background:trasparent;
font:Georgia, "Times New Roman", Times, serif;
font-size:10px;
text-align::left;
}
#colonna_destra h1{
border: 1px solid Black;
background: trasparent;
font:Georgia, "Times New Roman", Times, serif;
font-style
font-size:14px;
width: auto;
text-align: center;
margin: 10px 20px;
}
#colonna_destra p{
background: trasparent;
font:Georgia, "Times New Roman", Times, serif;
font-size:10px;
text-align:left;
margin: 2px 10px;
}
Rispondi quotando