Patio Layout working

by achudars

HTML

<div id="container">
    <article class="oneXone">hello world</article>
    <article class="oneXone">hello world</article>
    <article class="twoXone rhs">hello world</article>
    <article class="threeXone">hello world</article>
    <article class="oneXone rhs">hello world</article>
    <article class="oneXtwo">hello world</article>
    <article class="twoXone">hello world</article>
    <article class="oneXtwo rhs">hello world</article>
    <article class="oneXone a">hello world</article>
</div>

CSS

#container {
    width: 480px;
}
article {
    float: left;
    margin: 0 8px 8px 0;
    padding: 5px;
    background-color: red;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.rhs {
    margin-right: 0;
}
.floatRight {
    float: right;
}
.oneXone {
    width: 114px;
    height: 114px;
}
.twoXone {
    width: 236px;
    height: 114px;
}
.threeXone {
    width: 358px;
    height: 114px;
}
.oneXtwo {
    width: 114px;
    height: 236px;
}
.oneXthree {
    width: 114px;
    height: 358px;
}
.twoXtwo {
    width: 236px;
    height: 236px;
}
.a {
    background-color: #1361aa;
    margin: -122px 0 0 122px;
    width: 236px;
}