Allora, cerco di descrivere bene il problema.
Sto facendo delle prove cercando di creare un layout a 2 colonne tramite css. Ho letto un po' di tutorial e mi sono documentato, ma non riesco a risolvere un problema. Di seguito posto il codice della pagina:
codice:
<?xml version="1.0" encoding="iso8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prova</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header">Titolo</div>
<div class="page">
<div id="rightpanel">
<ul>
[*]uno
[*]due
[*]tre
[/list]
</div>
<div id="content">
Contenuto da aggiungere. Qui c'è tantissimo contenuto da aggiungere ma in realtà non so ancora cosa scrivere. Aiutoooo!!
Perchè il rightpanel non ha la stessa altezza di content per esempio?
</div>
</div>
</body>
</html>
Ed ecco il foglio di stile associato:
codice:
body {
text-align: center;
margin: 5% auto;
width: 640px;
background: #003300;
/*border: 2px solid green;*/
}
#header {
width: 640px;
height: 100px;
background: white;
}
.page {
position: relative;
width: 640px;
background: gray;
text-align: left;
}
#content {
position: relative;
left: 15px;
width: 400px;
padding-top: 1px;
text-align: left;
background: yellow;
}
#rightpanel {
position: absolute;
width: 180px;
height: 100%;
right: 10px;
text-align: center;
background: #eeeeee;
}
Ok. Quello che vorrei ottenere è che la seconda colonna (quella di destra, cioè "rightpanel") avesse sempre la stessa altezza di quella di sinistra (content). Ho notato che in Firefox ciò accade, ma in IE (versione 6) non è così. C'è qualcuno che può aiutarmi?
Vi ringrazio anticipatamente!