&share CSS LAYOUT Test - pure CSS

by otupman

HTML

<main>
  <header>
    <h1>Site</h1>
  </header>
  <section>
    <article>
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente!</p>
    </article>
    <article>
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente!</p>
    </article>
  </section>
  <aside>
    <div class="module">
      <h3>Module</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio rem ab delectus fugit repellendus perspiciatis dolor consequuntur tenetur voluptatem a vitae odit aspernatur? Voluptas quisquam corporis nostrum aspernatur aliquid harum saepe ab pariatur veniam iste ipsam alias nemo voluptatibus doloribus.</p>
    </div>
  </aside>
</main>

CSS

body {
  padding: 30px;
}
header {
  background: lightblue;
}
section {
  background: lightgreen;
  width: 75%;
  float: left;
}
article {
  background: white;
  margin: 0 0 1rem 0;
}
aside {
  background: pink;
  width: 25%;
  float: right;
}
header, article, section, .module {
  padding: 1rem;
}

JavaScript

/** 
 &share CSS Alignment Test v01SEP2014
 
 Problem:
 
 In the bottom-right pane we have the output of the combination of HTML & CSS. We expected to see the "Module" aside to be aligned nicely to the right of the "title" blocks and that the "Site" header also aligns nicely.
 
 Task (basic): modify to make the Module aligned nicely with the sections and header.
 
 Task (stretch 1): Go 'crazy', make that responsive. At the least we'd expect to see the aside (which will one day have links) become horizontal and stack between the header and the sections. Maybe you have an idea to make it even awesomer between mobile/tablet/desktop?
 
 Task (stretch 2): Ok, crazier time. We'd really expect to see the aside collapse with a link (preferably a hamburger icon) to open it and the header to now align with the sections. Fyi animations make us all fluttery in the belly.
 
 Instructions:
 
 1. Click the 'Fork' button up at the top
 2. Modify HTML/CSS as required
 3. When complete, click the 'Update' button
 4. Send the URL of your completed solution (it should look like jsfiddle.net/[code]/[number])
 5. If you attempt the stretch tasks, please submit a Browserstack screenshot URL (see hints below)
 
 Hints, tips, etc.
 
 - There's no one solution to the basic task; feel free to send us as many different solutions as you like!
 - To see full-screen, hit the 'Share' drop down and use the 'Fullscreen' link
 - We're hardcore here (in this test); no frameworks.
 - Browserstack: see it on many devices by heading here: http://www.browserstack.com/screenshots
 - We really don't care (right now) about anything that doesn't support CSS 3 so IE 9 and above; newer Chromes, Firefoxes and Safaris. iPhone 4S and above. Androids and above.
 
 **/