ho il seguente foglio di stile:
codice:
/*stili per il layout fluido*/
html,body
{
margin: 0;
padding:0
}
body
{
font-family: arial,sans-serif;
font-size: 76%
}
div#container
{
position: relative;
background-color: #FEDBC5
}
/*stili generici, su header e footer*/
div#header
{
height: 80px;
background-color:#36C;
color: #ff0
}
h1,h2
{
margin: 0;
padding:0
}
h1
{
padding-left: 20px;
font: bold 2.3em/80px arial,sans-serif;
background-image: url(img/top.jpg);
background-repeat: no-repeat;
}
h2
{
color: #69f;
font-size: 1.5em;
}
.error
{
color: red;
font-size: 1.5em;
}
div#footer a
{
color:#fff;
font-weight: bold;
text-decoration: underline
}
/*stili specifici per il layout*/
div#breadcrumbs
{
height: 15px;
padding: 0 175px;
background-color: #FEDBC5;
color: #000
}
div#navigation
{
position: absolute;
top: 95px;
left: 0;
width: 160px;
\width:170px;
w\idth:160px;
padding: 1em 0 0 10px;
background-color: #FEDBC5;
/*background-color: #FFCE9D;*/
}
div#extra
{
position: absolute;
top: 95px;
right: 0;
width: 160px;
\width:170px;
w\idth:160px;
padding: 1em 5px;
background-color: #FEDBC5;
}
div#content
{
/*margin: 0 170px;*/
margin-left: 170px;
margin-right: 15px;
padding: 1em 10px;
background-color: #fff
}
div#content a
{
color: #69f;
font-size: 1.5em;
text-decoration: underline;
}
div#content a:hover
{
color: #36C;
}
div#footer
{
text-align:center;
padding: 5px 0;
background-color: #B6937F;
color: #000
}
/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.4em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
div#navigation p{font-size: 90%}
/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}
Il problema è che se l'elemento navigation (barra laterale) è più alta (ci sono parecchie voci nel menù) dell'elemento content allora la barra di navigazione passa sopra al footer.
Come faccio a fare in modo che navigation, content e extra abbiano la stessa altezza heigth?