честно говоря, было лень искать ошибку в коде, но суть я понял и сверстал по стандартному двухколоночному макету с текучей версткой + ваше меню, нужно только цвета и размеры поменять.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
****<title>Untitled</title>
<style type="text/css">
* {
****margin: 0;
****padding: 0;
}
html, body {
****height: 100%;
****width: 100%;
}
body.active #sidebar li.active a {
****background: #A5A5A5;
}
#sidebar {
****width: 16%;
****height: 96%;
****padding: 2%;
****display: block;
****float: left; *
****background: #9AB4D5;
}
#content {
****width: 80%;
****height: 100%;****
****display: block;
****float: left;****
****background: #E188A5;
}
#content p {
****margin: 2%;
}
#sidebar ul {
****display: block;
****list-style: none;
}
#sidebar li a {
****margin: 2%;
****display: block;
****border-right: 20px solid black;
}
#sidebar li a:hover {
****background: #A5A5A5;
****border-right: 20px solid red;
}
</style>
</head>
<body class="active">
<div id="sidebar">
****
</div>
<div id="content">
ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст </p>
</div>
</body>
</html>