Ecco un layou a tre colonne pių complesso. Usa il trucchetto di Tantek Celik per risolvere l'incorretta gestione del box model da parte di Explorer 5.
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<style type="text/css">
body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
font-weight:900;
color:#ccc;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#contenuto {
width:auto;
margin:20px 210px 20px 170px;
border:1px solid black;
background-color:white;
padding:10px;
}
#menusin {
position:absolute;
width:150px;
top:110px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:2;
/* Questo è il trucco per ingannare Explorer 5 */
voice-family: "\"}\"";
voice-family:inherit;
width:128px;
}
/* Con questa dichiarazione risolviamo un bug di Opera 5 */
body>#menusin {width:128px;}
#menudes {
position:absolute;
width:190px;
top:110px;
right:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
body>#menudes {width:168px;}
</style>
</head>
<body>
<div id="contenuto">
<h1>Contenuto</h1>
<p>.........<p>
<h2>Codice</h2>
<p> ........... </p>
</div>
<div id="menusin">
<h2>Menu sinistro</h2>
<p>
...............
</p>
</div>
<div id="menudes">
<h2>Menu destro</h2>
<p>.............</p>
</div>
</body>
</html>