Übung Adaptives Layout

dabblet.css

/**
 * Übung Adaptives Layout
 */

body { padding: 2.5%; }
div { margin: 0 2.5% 2.5%; height: 80px; border-radius: 8px; }


/* Mittleres Layout */
@media screen and (min-width: 500px){
    #bar {
        float: left;
        width: 20%;
    }
    #baz {
        float: right;
        width: 70%;
    }
    #bla {
        float: left;
        clear: left;
        width: 20%;
    }
    #buh {
        clear: both;
    }
}

/* Maximal-Layout */
@media screen and (min-width: 750px){
    #baz {
        float: left;
        width: 45%;
    }
    #bla {
        float: right;
        clear: none;
        width: 20%;
    }
}

dabblet.html

<div id="foo" style="background:red"></div>
<div id="bar" style="background:green"></div>
<div id="baz" style="background:blue"></div>
<div id="bla" style="background:yellow"></div>
<div id="buh" style="background:magenta"></div>​

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}