Imatge
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)
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: 600px;
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 {
margin: 0;
float: left;
width: 450px;
height: 1% /* Holly hack for Peekaboo Bug */
}
#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="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-detra.La columna esquerre amb un float left amb una amplada absoluta igual que la de la detra.
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 2 "tires" una 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:
Gracies també a les llistes de correu ovillo.org i web standards group