Pannels

HTML

<div id="pTwo" class="pannel">
    <div class="pContent">This is the first one</div>
</div>
<div id="pOne" class="pannel">
    <div class="pContent">This is the second one</div>
</div>
<div id="pThree" class="pannel">
    <div class="pContent">This is the third one</div>
</div>

CSS

body {
    padding: 0px;
    margin: 0px;
    background-color: #999;
}
.pContent {
    width: 90%;
    height: auto;
    margin: 0 auto 0 auto;

    margin-top: 3%;<!-- Why can't this be margin top? -->
}
.pannel {
    width: 100%;
        display: inline-block;
    padding-bottom: 10%;
}
#pOne {
    background-color: white;
}
#pTwo {
    background-color: blue;
}
#pThree {
    background-color: green;
}

JavaScript

$(document).ready(function () {
    resizeDiv();
});

window.onresize = function (event) {
    resizeDiv();
};

function resizeDiv() {
    vph = $(window).height();
    $('.pannel').css({
        'height': vph + 'px'
    });
}