Living In A Box (checkerboard bg version)

Fluid Equal Height Responsive Grid

by gk

HTML

<body>
    
<h1>Living In A Box</h1>

    
<h3>Fluid Equal Height Responsive Grid</h3>

    <div class="wrapper">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
        <div class="box">Box 5</div>
        <div class="box">Box 6</div>
        <div class="box">Box 7</div>
        <div class="box">Box 8</div>
    </div>
    <br style="clear:both" />
    <!-- I don't care ;) -->
    <footer>
        <p>version: 22:57 21 July 2015</p>
    </footer>
</body>

CSS

body {
    width:90%;
    margin: 0 auto;
    text-align:left;
    /* IE6 */
    color:#555;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: white;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVQYV2N4DwX/oYBhgARgDJjEAAkAAEC99wFuu0VFAAAAAElFTkSuQmCC");
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: repeat;
    background-size: auto;
}
h1, h3 {
    margin:10px;
    padding:0;
    line-height:30px;
}
.wrapper {
    height: 200px;
}
.wrapper .box {
    float: left;
    height: 100%;
    width: 200px;
    background-color: #f5f5f5;
    margin-right: 10px;
    margin-bottom: 10px;
}
.box {
    padding:10px;
    border:1px solid #ccc;
}
footer {
    margin-top:6px;
    width: 80%;
}