Ein kleines Gridframework

HTML

<div class="grid">
    <div class="gc g2of9">
        <div class="gcmr"> Inhalt </div>
    </div>
    <div class="gc g2of9">
        <div class="gcmr"> Inhalt </div>
    </div>
    <div class="gc g5of9">
        <div class="gcnm"> Inhaltshjk
        
        </div>
    </div>
</div>

CSS

.grid {display: table; width: 100%; overflow: visible;}
.gc { float: left; margin: 0;}

.gcmr  {margin: 0 10px 0 0;padding: 0 10px;}
.gcnm {margin: 0;padding: 0 10px;}


.g1of9 {width: 11.11111111%;}
.g2of9 {width: 22.22222222%;}
.g3of9 {width: 33.33333333%;}
.g4of9 {width: 44.44444444%;}
.g5of9 {width: 55.55555555%;}
.g6of9 {width: 66.66666666%;}
.g7of9 {width: 77.77777777%;}
.g8of9 {width: 88.88888888%;}


/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

/* only for testing */

.gcnm, .gcmr {height: 60px; background: #dedede;}
.grid {background: #aaa;}