[Mari_like]

Решила попробовать адаптивную верстку, но что-то не получается.
Макет: Шапка, левый сайдбар, и правый блок с фотографиями.
+ подвал. При сворачивании окна браузера, каждый блок должен стать друг под другом. Но блок с фото уходит под сайдбар. А подвал вообще улетел вверх.
Посмотрите пожалуйста код, что я делаю неправильно?

html,body{
height:100%;
width:100%;
overflow-y:auto;
position:relative;
font-size:87%;
font-family:Arial, Helvetica, sans-serif;
font-weight: normal;
background:url(../img/bg.png) repeat-x;
background-position: 100%;
}

header{
width:100%;
position: relative;
z-index: 2;
}


nav{
display: inline-block;
position: absolute;
left:0;
float:left;
width:250px;
height:auto;
padding-left:2.7%;
background:red;
}


article{
position:absolute;
right:0%;
overflow: hidden;
width:80%;

}

footer{
width:100%;
height:105px;
position:absolute;
top:0%;
z-index:2;
}