One Third Columns

Quick demo of one third columns using CSS

by Adam Zuckerman

HTML

<div class="one-third">stuff</div>
<div class="one-third">stuff</div>
<div class="one-third">stuff</div>

<br/>

<div class="one-third">stuff</div>
<div class="two-thirds">stuff</div>

<br/>

<div class="three-thirds">stuff</div>

CSS

*, *:after, *:before {
    /* This is the part that allows your boxes to stay the size you define */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0px;
    font-family: Arial;
    font-size: 12pt;
}
div {
    border: solid 1px black;
    padding: 10px 20px 10px 10px;
}
div:last-of-type {
    padding-right: 0px;
}
.one-third {
    float: left;
    width: 33.33%;
    background-color: lightblue;
}
.two-thirds {
    float: left;
    width: 66.66%;
    background-color: lightblue;
}
.three-thirds {
    float: left;
    width:99.99%;
    background-color: lightblue;
}