Si deseas crear 3 tablas con CSS que ocupen el ancho de tu container (div), solo debes seguir estos pasos. Mediante CSS, la propiedad float y overflow, podremos crear 3 tablas “fluidas” (se dice por la referencia a float).
Código CSS a implementar:
.xouter3{ width:80%; border:1px solid #000; float:left; margin:15px 0 15px 9%; } .xleftcol3{ float: left; width: 33%; background:#809900; } .xmiddlecol3 { overflow:auto; background:#eff2df; } * html .xmiddlecol3{float:left} * html .xmiddlecol3 .xinner3{width:100%;} .xrightcol3 { float:right; width: 33%; background:#d2da9c; position:relative; }
Código HTML a implementar:
<div class="xouter3"> <div class="xleftcol3"> <p>Columna de la derecha: </p> </div> <div class="xrightcol3"> <p>Columna de la izquierda: </p> </div> <div class="xmiddlecol3"> <div class="xinner3"> <p>Columna central: </p> </div> </div> </div>
Con estos sencillos pasos ya tendremos las 3 tablas (columnas) por medio de CSS.
En IE pueden aparecer pequeños problemas, como por ejemplo, que las tablas no llenen todo el div o que se superpongan encima de otras:
¡Nada es perfecto!
Vía | Pmob