Panorama Média Global

Question

Just using HTML and CSS, is there a way to create nested squares. in another words, one big square A, and another square inside A(let's call this B), and another square inside B, etc etc continue like that about 10 times. The Squares need to be centered within each squares. also the each squares need to be different colors. thank you!

Accepted Answer

Need to be more specific, but here is a simple example of how.

HTML

<div id="wrap">
    <div><div><div><div><div><div><div><div><div><div>
    </div></div></div></div></div></div></div></div></div></div>
</div>

CSS

#wrap{
    height:500px;
    width:500px;
}

div {
    width:90%;
    height:90%;
    border:1px solid black;
}

Edit based on your new info

Vertical aligning elements to the middle seems to require setting the wrapper to display:table; and setting the inner divs to display:table-cell; and vertical-align:middle. However, this causes the backround colors to all take the bottom most cell's color when nested... so I just just absolute positioning instead to vertical align:

HTML

<div id="wrap"> 
    <div id="a" class="z"><div id="b" class="z"><div id="c" class="z"><div id="d" class="z"><div id="e" class="z"><div id="f" class="z"><div id="g" class="z"><div id="h" class="z"><div id="i" class="z"><div id="j" class="z">
        </div></div></div></div></div></div></div></div></div></div>
</div>

CSS

div {
    width:90%;
    height:90%;
    margin:0 auto;
}

#wrap{
    width:500px;
    height:500px;
    position:relative;
}

.z {
    position:absolute;
    top:5%;
    left:5%;
}

#a{background-color:#aaa}
#b{background-color:#999}
#c{background-color:#888}
#d{background-color:#777}
#e{background-color:#666}
#f{background-color:#555}
#g{background-color:#444}
#h{background-color:#333}
#i{background-color:#222}
#j{background-color:#111}

Panorama Média Global

Nested Squares Using Html and Css [Closed]

1 Answer

David Miller