CSS3 Media queries - two layouts

Question

I am experimenting with css3 media queries and I am trying to create two different layouts one for small screens (phones,tablets) and one for larger screens. The layout should include three main divs (a,b,c).

  <div class="wrapper">
      <div id="a"></div> 
      <div id="b"></div>
      <div id="c"></div>
  </div>

The small screens have div#a on top and the two other divs div#b, div#c to be placed 50%-50% below the first div, see image:

The larger screen should have all divs in a row, see image:

This is what I have managed to do so far but is not working as expected..

http://jsfiddle.net/dT9HY/

Answer 1

This would be the basic idea. Included styling to facilitate padding on the boxes.

http://fiddle.jshell.net/E4jjt/14/
http://fiddle.jshell.net/E4jjt/14/show/

* {
  /* http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
.wrapper:before, .wrapper:after {
    content: " ";
    display: table;
}
.wrapper:after  {
    clear: both;
}

.wrapper > div {
    min-height:200px;
    width:33.333333%;
    float: left;
    padding: 15px;
    position: relative;
    /* extra cosmetics */
    color: #fff;
    text-align: center;
    font: 1.5em Georgia;
}
#a {
    background-color: #252525;
}
#b {
    background-color:#ACACAC;
}
#c {
    background-color:#F4CF40;
}

@media all and (max-width: 800px) {
    #a {
        width: 100%;
    }
    #b, #c {width: 50%;}
    #b {
        clear: left;
    }
}