Responsive Grid Layout Portrait-orientation Dashboard 100%h&w CSS?

Question

I have a dashboard for @media (orientation: landscape) { that I would like to make a @media (orientation: portrait) { version of..

Here's the landscape: http://jsfiddle.net/FhKEx/

And here's the grid for the portrait:

Thought that it would be something like row 1 (100%w, 20%h) and row 2 (100%w, 80%h), but am wondering how to make the correct floats on the second row..

<div class="dashboard">
    <div class="row1">
        <div class="box1">"w:25%; h:20%;</div>
        <div class="box2">w:25%; h:20%;</div>
        <div class="box3">w:25%; h:20%;</div>
        <div class="box4">w:25%; h:20%;</div>
    </div>
    <div class="row2">
        <div class="box5">"w:45%; h:20%;</div>
        <div class="box8">"w:45%; h:30%;</div>
        <div class="box6">"w:40%; h:50%;</div>
        <div class="box9">w:85%; h:12.5%;</div>
        <div class="box10">w:85%; h:17.5%;</div>
        <div class="box7">w:15%; h:70%;</div>
        <div class="box11">"w:15%; h:10%;</div>
    </div>
</div>

Answer 1

OK, I managed to make them float like on your image without changin the HTML markup.

The Height/width of elements in .col2 might need a bit of tweaking to match the desired height/width exacly.

FIDDLE

CSS :

html,body,.dashboard{
    width:100%;
    height:100%;
    margin:0;
}

.col1{
    width:100%;
    height:20%;
}
.col1 > div{
    width:25%;
    height:100%;
    float:left;
}
.col2{
    width: 85%;
    height:80%;
    float:left;
}
.col2 > div{
    float:left;
}
.col2 .box6{
    float:right;
    width: 45%;
    height:70%;
}
.box5,.box8{
    width:55%;
}
.box5{
    height:30%;
}
.box8{
    height:40%;
}
.box9{
    height:12%;
    width:100%;
}
.box10{
    height:18%;
    width:100%;
}
.box7,.box11{
    width:15%;

}
.box7{
    height:70%;
    width:15%;
    float:left;
}
.box11{
    height:10%;
    width:15%;
    float:left;
}

.border {
  background-color: white;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  border:1px solid #000;
}