No replies
oopalonga's picture
Last seen: 8 years 9 weeks ago
Timezone: GMT-6
Joined: 2014-09-22
Posts: 1
Points: 2


I'm trying to center divisions on top of one another to look something similar to this.

So far, the closest I've come to the above image is what I shared in the attachment. This is just a practice exercise for me, so it's not that important, I just want all the divisions centered, and then on top of one another, with the largest div on the bottom, and the smallest div on the top.

Here's my relevant HTML code:

<div id="divWrapper"> <!--divWrapper-->
        <div id="divFive"></div>
        <div id="divFour"></div>
        <div id="divThree"></div>
        <div id="divTwo"></div>
    </div>                <!--divWrapper-->

And here's my CSS code:

div {
    margin-left: auto;
    margin-right: auto;
    position: fixed;  /*I know I shouldn't be using fixed positioning here; however, it gives me the result closest to what I'm looking for */
#divWrapper {
    height: 1000px;
    width: 1000px;
    background-color: black;
#divFive {
    height: 800px;
    width: 800px;
    background-color: white;
    margin: auto;    
#divFour {
    height: 600px;
    width: 600px;
    background-color: blue;
#divThree {
    height: 400px;
    width: 400px;
    background-color: yellow;
#divTwo {
    height: 200px;
    width: 200px;
    background-color: orange;

Any suggestions?