Lösung Adaptives Layout

dabblet.css

/**
 * Lösung Adaptives Layout
 */
* { box-sizing: border-box; }
body { padding: 0 1%; font-family: Arial, sans-serif; line-height: 1.6; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav ul a { display: block; float: left; width:12.5%; font-weight: bold; }
#main, footer { clear: both; padding: 1em 0; }
footer { border-top: 1px solid #999; }
#main > section { float: left; width: 65%; }
#main > aside { float: right; width: 30%; }
#news a { display: block; font-weight: bold; }
#news p { width: 50%; float: left; font-size: 0.9em; }
#news p:nth-child(even) { padding-left: 5%; }
#news p:nth-child(odd) { padding-right: 5%; }
img { float: right; margin: 0.5em 0 2em 2.5em; }

/* An's Werk! */


/* Text herunterskalieren wenn der Platz schrumpft */
@media screen and (max-width:960px){
    body {
        font-size: 0.95em;
    }
}
@media screen and (max-width:640px){
    body {
        font-size: 0.9em;
    }
}

/* Navigation in mehrere Zeilen verteilen */
@media screen and (max-width:1000px){
    nav ul a {
        width:25%;
    }
}
@media screen and (max-width:500px){
    nav ul a {
        width:50%;
    }
}
@media screen and (max-width:400px){
    nav ul a {
        width:100%;
        border: none !important;
    }
}

/* Irgendwann macht das floatende Bild keinen Sinn mehr */
@media screen and (max-width:840px){
    img {
        float: none;
        display: block;
        margin: 0 0 1em 0;
    }
}


/* Bild-Maximalbreite beschränken */
img {
    max-width: 100%;
}

/* News in mehrere Zeilen verteilen */
@media screen and (max-width:840px){
    #news p {
        width: 100%;
        float: none;
        padding: 0 !important;
    }
}

/* Zwei-Spalten-Layout zusammenklappen */
@media screen and (max-width:600px){
    #main > section, #main > aside {
        float: none;
        width:100%;
    }
}

dabblet.html

<header>
    <h1>Beispielmeier AG</h1>
</header>

<nav>
    <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Leistungen</a></li>
        <li><a href="#">Referenzen</a></li>
        <li><a href="#">International</a></li>
        <li><a href="#">Vorstand</a></li>
        <li><a href="#">Investoren</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</nav>

<section id="main">

    <section>
        <h2>Die Technik für die Welt von morgen</h2>
        <img src="http://lorempixel.com/400/300">
        <p>Lorem lean startup ipsum product market fit customer development acquihire technical cofounder. User engagement A/B testing shrink a market venture capital pitch deck. Social bookmarking group buying crowded market pivot onboarding freemium prototype ping pong. Early stage disruptive ecosystem community outreach dynamic location based strategic investor.</p>
        <p>Accelerator photo sharing business school drop out ramen hustle crush it revenue traction platforms. Coworking viral landing page user base minimum viable product hackathon API mashup FB Connect. Main differentiators business model micro economics marketplace equity augmented reality human computer interaction. Board members super angel preferred stock. Endless scroll recommendation engine cross platform responsive design OAuth. Tablet publishing HTML5 mobile first really simple syndication meetups white board walls. User experience iterate algorithm gamification semantic web value add market research stealth.</p>
        <p>Rockstar developer internet of things bleeding edge browser extension social capital. Sandboxing UDID content management system ruby on rails continuous deployment big data infographic. Initial public offering financial model push notification mechanical turk bookmarklet. Term sheet convertible note colluding bootstrapping. Cloud computing subscription model out of the box proactive solution.</p>
    </section>

    <aside>
        <h2>News</h2>
        <section id="news">
            <p><a href="#">Board members</a> Super angel preferred stock. Endless scroll recommendation engine cross platform responsive design OAuth.
            <p><a href="#">Tablet publishing</a> HTML5 mobile first really simple syndication meetups white board walls. User experience iterate algorithm gamification semantic web value add market research stealth.
            <p><a href="#">Rockstar developer</a> Internet of things bleeding edge browser extension social capital.
            <p><a href="#">Accelerator photo sharing</a> Business school drop out ramen hustle crush it revenue traction platforms.
        </section>
    </aside>

</section>

<footer>
    <p>
        © 2012 Beispielmeier AG
    </p>
</footer>​

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}