Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 700px;
background: url("/path/to/your/background_cols.gif") repeat;
}
#header {
margin: 0 0 15px 0;
background: yellow;
}
#side-a {
float: left;
width: 150px;
}
#side-b {
float: right;
width: 150px;
}
#content {
float: left;
width: 56%;
}
#footer {
clear: both;
background: #A2A2A2;
}
<div id="wrapper"> <div id="header"> HEADER </div> <div id="container"> <div id="side-a"> SIDE A </div> <div id="content"> CONTENT </div> <div id="side-b"> SIDE B </div> </div> <div id="footer"> FOOTER </div> </div>
Has de guardar aquesta imatge ja que s'usa per simular els colors de les columnes. (Recorda que el path de una imatge en un css es relatiu a aquest css)
L'ordre en el codi es esquerre-centre-detra (em penso que no pasa res si es e-c-d) La columna esquerre amb un float left amb una amplada absoluta igual que la de la detra perň aquesta amb un float right. La columna central amb un float left perň amb el seu valor como un %
Per a que el color de fons arribi fins el final s'usa una imatge de backgorund per el wrapper que sigui igual d'amplada que la suma de les columnes amb 3 "tires" de cada color
La idea de ficar un backgound en el wrapper me la va donar Marta, més tard també la vaig veure altres models que implementen la mateixa idea
Per exemple en:
La idea de ficar el % en la columna central potser ho vaig veure alguna vegada per Internet i ho guardo subconscienment peró en principi ha estar provar i tindre sort.
Gracies també a les llistes de correu ovillo.org i web standards group