faux columns

joey.santiago

faux columns

Ciao a tutti,

ho un problema con una tecnica stravecchia che ormai dovrei aver imparato, eppure...

Ecco il codice di esempio:

<html>
<head>
<title></title>
<style type="text/css">
body{
width:976px;
margin:0 auto;
}
#cols{
    width:976px;
    float:left;
    background-image: url('bgcols.png');
    background-repeat: repeat-y;
    background-attachment:fixed;
    background-position: 80% 0; 
}
#main{
  float:left; 
  width:80%;
  background-color: transparent;
}
#side{
  margin-top:1em;
  padding:0 5px 0 0;
  float:right;
  text-align:right;
  width:20%;
  margin-left:-6px;
  background-color:transparent;
  border-left:1px solid red;
}
</style>
</head>
<body>
<div id="cols">
<div id="main">
<h1>Lorem</h1>
<p>ipsum dolor sit amet</p>
</div>
<div id="side">
<ul>
<li>uno</li>
<li>due</li>
</ul>
</div>
</div>
</body>
</html>
```Ed ecco cosa ne risulta: 

Perché anziché essere posizionata all'80% del div cols, l'immagine viene posizionata all'80% della pagina (di html, direi...)
mi lascia un po' perplesso...

Grazie!

joey.santiago

Ma... Anziché "curare le maiuscole", non potevi anche darmi una dritta?
A parte gli scherzi, farò attenzione.