Fluid grid attempt

by oilvier

HTML

<div class="row">
	<div class="grids">
        <div class="grid-1-3"><p>Aside</p></div>
        <div class="grid-2-3"><p>Main</p></div>
        <div class="grid-1-4"><p>Aside</p></div>
        <div class="grid-3-4"><p>Main</p></div>
	</div>
</div>

CSS

*, *:before, *:after {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.row {margin:0 auto; padding:0 20px; width: 100%; max-width: 1140px; min-width: 755px;}
.grids {margin-left:-20px; overflow: hidden;}
[class^="grid-"] {padding-left:20px; float: left;}
.grid-1-3 {width:33.333%;}
.grid-2-3 {width:66.666%;}
.grid-1-4 {width: 25%;}
.grid-3-4 {width: 75%;}

/* Style */
.row {background:#F9F2E7; padding-top:20px;}
.grids p {background:#40C0CB; padding:10px; border-radius:3px; color: #FFFFFF; text-align: center; margin-bottom:20px;}