Проводник Windows 7 в макете CSS

Question

Я пытаюсь сделать Windows Explorer-подобным в CSS, а пока вот мой код.

#explorer расположен неправильно. Вот небольшое объяснение того, что я пытаюсь сделать.

sys_top сверху, всегда видимый

info_Bar внизу страницы, всегда видимый

навигационная панель слева, ширина 20%

проводник справа, ширина 80%

HTML:

<div id="sys_top"></div>
<div id="navbar"></div>
<div id="explorer"></div>
<div id="infobar"></div>

CSS:

html, body {
padding:0;
margin:0;
height:100%;

cursor: default;

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
}
#sys_top {
background: url(../menu_files/bg.png) repeat-x;
width:100%;
top:0;
position: fixed;
}
#navbar {
width: 20%;
height: 100%;
float:left;
left: 0;
top: 30px;
position: fixed;
border-right: #CCCCCC solid 1px;
}
#explorer {
width: 500px;
height:300px;
float:right;
top: 30px;

overflow:auto;
}
#infobar {
height: 120px;
width: 100%;
bottom:0;

position: fixed;
display:block;
margin-top: 5px;
margin-left: 5px;
} 

Answer 1

Вы говорите:

проводник справа, ширина 80%

и ваш css говорит:

#explorer {
width: 500px;
...

ФИНАЛЬНЫЙ ОТВЕТ:

body {
overflow: hidden;
}

#navbar {
position: absolute;
width: 20%;
bottom: 120px;
left: 0;
top: 30px;
}

#explorer {
position: absolute;
top: 30px;
right: 0;
bottom: 120px;
overflow: auto;
width: 80%;
}

Вы должны сбросить float, height, поля для #explorer и position: fixed, height, float для # navbar.