Floating, Clearing & responsive Grid

by Dini Mer

HTML

<div class="container">
    <h1>Beispiel 1</h1>
    <div class="clearfix border">
        <div class="pull-left red">Content 1</div>
        <div class="pull-left blue">Content 2</div>
    </div>
    
    <h1>Beispiel 2</h1>
    <div id="navigation">
        <nav>    
            <ul class="clearfix">
                <li><a href="#">Home</a></li>
                <li><a href="#">Das funktioniert bis und mit IE8</a></li>
                <li><a href="#">Menü 3</a></li>
                <li><a href="#">Menü 4</a></li>
                <li><a href="#">Menü 5</a></li>
            </ul>
        </nav>
    </div>
    
    <h1>Beispiel 3</h1>
    <div class="row">
        <div class="col-12">
            <div>12</div>
        </div>
        
        <div class="col-1">
            <div>1</div>
        </div>
        <div class="col-11">
            <div>11</div>
        </div>
        
        <div class="col-2">
            <div>2</div>
        </div>
        <div class="col-10">
            <div>10</div>
        </div>
        
        <div class="col-3">
            <div>3</div>
        </div>
        <div class="col-9">
            <div>9</div>
        </div>
        
        <div class="col-4">
            <div>4</div>
        </div>
        <div class="col-8">
            <div>8</div>
        </div>
        
        <div class="col-5">
            <div>5</div>
        </div>
        <div class="col-7">
            <div>7</div>
        </div>
        
        <div class="col-6">
            <div>6</div>
        </div>
        <div class="col-6">
            <div>6</div>
        </div>
        
        <div class="col-4">
            <div>4</div>
        </div>
        <div class="col-4">
            <div>4</div>
        </div>
        <div class="col-4">
            <div>4</div>
        </div>
        
        <div class="col-3">
            <div>3</div>
        </div>
        <div class="col-3">
            <div>3</div>
        </div>
        <div class="col-3">
     ...

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

body { font-family: arial, sans-serif; color: white; }
.container { margin: 0 30px; }

h1 { color: black; }

a, a:link, a:visited { color: black; text-decoration: none; }
a:hover, a:active { color: white; }

/* Beispiel 1 Clearfix -------------------------------------------- */
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; }
.clearfix:after { clear: both; }

.pull-left { margin-top: 1em; min-height: 50px; }
.pull-left:first-child { margin-top: 0; }

.border { padding: 1em; border: 1px solid black; }
.red { background-color: red; color: white; }
.blue { background-color: blue; color: white; }

@media screen and (min-width: 768px) {
    .pull-left { float: left; margin-top: 0!important; width: 50%; }
}

/* Beispiel 2 Navigation ------------------------------------------ */
#navigation ul { display: block; margin: -0.25em -0.5em; padding: 0; list-style: none; }
#navigation ul li { float: left; margin: 0.25em 0.5em; }
#navigation ul li a { display: block; padding: 0.5em 1em; background-color: #888; }
#navigation ul li a:hover { background-color: #666; }

/* Beispiel 3 Grid-System ----------------------------------------- */
.row { *zoom: 1; }
.row:before, .row:after { display: table; content: ""; line-height: 0; }
.row:after { clear: both; }

.row { margin: 0 -15px; color: black; }
.row > [class|="col"] { float: left; padding: 0 15px; }
.row > [class|="col"] > div { margin-bottom: 0.5em; background-color: #adf; }

.row > .col-1 { width: 8.333%; }
.row > .col-2 { width: 16.666%; }
.row > .col-3 { width: 25%; }
.row > .col-4 { width: 33.333%; }
.row > .col-5 { width: 41.666%; }
.row > .col-6 { width: 50%; }
.row > .col-7 { width: 58.333%; }
.row > .col-8 { width: 66.666%; }
.row > .col-9 { width: 75%; }
.row > .col-10 { width:...