Ciao a tutti, ero alla ricerca di un buon layout compatibile ed ho trovato questo indicato nella pagina:

http://matthewjamestaylor.com/blog/perfect-3-column.htm
E' perfetto ed è l'unico compatibile che sono risucito a recuperare in rete con ie6, ie7 e firefox.
Magari se ne conoscete altri indicatemli pure .

Il problema è non riesco a mettere un margine tutto intorno alla pagina. Su Firefox basta mettere html {padding:20px} ad esempoio e funziona perfettamente. Su IE6 funziona su tutti i lati tranne sulla parte sinistra. Probabilmente c'è qualcosa di mascherato che non distanzia la colonna dalla pagina.

Nel codice la parte che da il colore alla colonna di sinistra è:

.threecol .colleft {
right:50%; /* width of the middle column */
background:#f4f4f4; /* left column background colour */
}

Potrei metetre il colore bianco così sembra distanziato ma se metto un background alla pagina ovviamente si vede il grigio della colonna ancora attaccato alla pagina.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head><title>Titolo</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style media="screen" type="text/css">
/* <!-- */
html {padding:20px}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
a:link {
color: #333333;
text-decoration:none;
}
a:visited {
color: #333333;
text-decoration:none;
}
a:hover {
color: #333333;
text-decoration:underline;
}
body {
margin:0;
padding:0;
font-size:90%;
}
#banner{
clear:left;
float:left;
width:100%;
overflow:hidden;
/*
background-image:url(img_template/template_29/banner.jpg);
background-position:right;
*/
}
/* header styles */
#header {
clear:left;
float:left;
width:100%;
overflow:hidden;
border-bottom:4px solid #000;
}
#header p,
#header h1,
#header h2 {
clear:left;
float:left;
width:96%;
margin:0;
padding:.4em 2% .1em 2%;
}
#header ul {
/*
clear:left;
float:left;
width:96%;
margin:.7em 0 0 2%;
padding:0;
list-style:none;
*/
}
#header ul li {
display:inline;
}
#header ul li a {
display:block;
float:left;
list-style:none;
padding:.2em .5em;
text-decoration:none;
margin-right:10px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
}
#header ul li a.active {
font-weight:bold;
color:#fff;
background:#000;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
/* column container */
.colmask {
clear:both;
float:left;
width:100%; /* width of page */
overflow:hidden;
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
}
.colleft{
border-right:1px solid #999999; /* FIX border left column */
}
.col1,
.col2,
.col3 {
text-align:justify;
float:left;
position:relative;
padding:.5em 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}

/* 3 Column settings */
.threecol {
background:#f4f4f4; /* right column background colour */
}
.threecol .colmid {
right:25%; /* width of the right column */
background:#fff; /* center column background colour */
border-right:1px solid #999999; /* FIX border center column*/
}
.threecol .colleft {
right:50%; /* width of the middle column */
background:#f4f4f4; /* left column background colour */
}
.colleft {
right:50%; /* width of the middle column */
}
.threecol .col1 {
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
padding:1em 2%;
border-top:1px solid #ccc;
}
/* --> */
</style></head><body>

<div id="banner">
banner
</div>

<div id="header">




</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">

testo

</div>
<div class="col2">

colonna sinistra

</div>
<div class="col3">

<div align="center">colonna destra</div>

{news}

</div>
</div>
</div>
</div>
<div id="footer">
testo sotto
</div>

</body></html>