Maquetado con div

Maquetando con DIV’s (ejemplo IV)
18 04 2007
Esta vez, fui vencido por mi propia creatividad, al tratar de realizar esta estructura con ocho divs. En este caso, me vi obligado a colocar otro DIVmás para los bloques marcados con un color más fuerte. De todos modos, estoy contento de que, junto con ustedes, pude realizar esta estructura, aun más dinámica. Les prometo que para la siguiente vez,verán un diseño más dificil de maquetar y con solamente los DIV’s necesarios.
Aqui les dejo el codigo de este ejemplo para que lo estudien. El punto de esta maquetación es saber que los bloques que secolocan en flotante, si no tienen un alto igual, causaran que los siguientes caigan a la altura del más alto. Esto puede ser una ventaja o desventaja.
<div style = "display: table; width:500px;">
    <div style = "float: left; width: 104px;">
        <div style = "float: left; height: 100px; width: 102px;"></div>
        <div style = "float: left; height: 143px;width: 102px;"></div>
    </div>
    <div style = "float: left; height: 250px; width: 100px;"></div>
    <div style = "float: left; height: 150px; width:100px;"></div>
    <div style = "float: right; height: 50px; width: 175px;"></div>
    <div style = "float: right; height: 194px; width: 80px;"></div>
    <div style = "float:right; height: 194px; width: 87px;"></div>
    <div style = "float: right; height: 93px; width: 100px;"></div>
</div>
Solo como nota adicional, respecto a loconveniente de maquetar con DIV’s, es que todos los ejemplos que les mostré en este tutorial fueron probados en: Mozilla Firefox 2.0, Opera Browser 9.0 e Internet Explorer 6 y todos resultaron en la mismaestructura.
Articulos Relacionados:
* Maquetando con DIV’s
* Maquetando con DIV’s (ejemplo I)
* Maquetando con DIV’s (ejemplo II)
* Maquetando con DIV’s (ejemplo III)
Like this:
Like...