Адаптивная верстка.
 

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

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;
}

нужно видеть структуру html
лучше в рабочем виде, например здесь http://learn.javascript.ru/play или здесь http://codepen.io/pen/

http://learn.javascript.ru/play/4l3Xkc но без фото естественно

не пойму в чём там адаптивность, если нужно чтоб на определённой ширине что-то кудато уехало можно юзать http://htmlbook.ru/css/value/media с их помощью можно писать новые стили для определённой ширины