Wrapping Divs

by chrisfrisina

HTML

<div class="wrapper">
    <section class="first"></section>
    <section class="right"></section>
    <section class="second"></section>
    <section class="third"></section>
    <section class="fourth"></section>
</div>

CSS

.wrapper {
    height:600px;
    width:400px;
    background-color: red;

}
.right {
    height:200px;
    width: 25%;
    margin: 5px;
    display: inline-block;
    text-align: right;
    vertical-align: top;
    float: right;
    background-color: orange;
}
.first {
    height:100px;
    width:70%;
    margin: 5px;
    clear: left;
    vertical-align: top;
    float: left;
    display: inline-block;
    background-color: yellow;
}

.second {
    height: 100px;
    width: 95%;
    margin: 5px;
    display: inline-block;
    vertical-align: top;
    clear:left;
    background-color: green;
}

.third {
    height: 100px;
    width: 95%;
    margin: 5px;
    display: inline-block;
    vertical-align: top;
    clear:left;
    background-color: blue;
}

.fourth {
    height: 100px;
    width: 95%;
    margin: 5px;
    display: inline-block;
    vertical-align: top;
    clear:left;
    background-color: purple;
}