Imagen
Has de guardar esta imagen ya que se usa para simular los colores de las columnas. (Recuerda que el path de una imagen en un css es relativo a ese 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 esta imagen ya que se usa para simular los colores de las columnas. (Recuerda que el path de una imagen en un css es relativo a ese css.)
El orden en el código fuente es izquierda,derecha. La columna izquierda con un float left y un tamaño absoluto igual que la derecha.
Para que el color del fondo llegue hasta al final se usa un background para el wrapper que sea igual de ancho que las dos columnas y con cada color igual de ancho que cada columna.
La idea de poner un background en el wrapper me la dio Marta, aunque luego vi que hay más modelos que implementan la misma idea.
Por ejemplo en:
Lo de poner el % en la columna central tal vez lo vi alguna vez por internet y lo guardo en el subconsciente pero en principio ha sido ir probando y haber tenido suerte.
Gracias también a las listas de correo ovillo.org y web standards group