Muchísimas gracias por tu tiempo. Me ha servido para mucho, sólo investigar un poco. En realidad he modificado bastante el css, pero la solución evitando los elementos float, es de agradecer. Este es el nuevo CSS:
Código CSS:
Ver original*{
margin: 0;
padding: 0;
position: relative;
}
html, body {
background: #f5f5f5;
width: 100%;
height: 100%;
}
#pagina {
background: #CCC;
margin: 10px auto;
}
#principal {
background:#0066CC;
}
#col_izq {
background:#009966;
}
#col_dcha {
background:#FF9933;
}
#principal, #col_izq, #col_dcha {height:120px;}
/***********************
@medias queries
***********************/
@media all and (min-width: 700px) {
#pagina {
width: 700px;
}
#principal{
width: 500px;
position:absolute;
left:100px;
top:0;
}
#col_izq {
width: 100px;
position: absolute;
left: 0;
top: 0;
}
#col_dcha {
width: 100px;
position: absolute;
right: 0;
top: 0;
}
}
@media all and (max-width: 699px) and (min-width: 600px) {
#pagina {
width: 600px;
}
#principal{
width: 500px;
}
#col_izq {
width: 600px;
position: relative;
}
#col_dcha {
width: 100px;
position: absolute;
right: 0;
top: 0;
}
}
@media all and (max-width: 599px) and (min-width: 500px) {
#pagina {
width: 500px;
}
#principal{
width: 500px;
}
#col_izq, #col_dcha {
width: 500px;
position: relative;
}
}
</style>
¿Algo que se pueda mejorar?