I have created a navigation menu <div> that sits on the left of the page using float: left; and contains all the links on my page. The content part of the page sits to the right of the menu until it gets to the end of the navigation div and then all the information spills underneath it and lines up with the left of the window.
You need to set the height ofthe navigation div, and also ensure the content div does not exceed that height.
Try this (I've added another column on the right.)
<html>
<head>
<style type="text/css">
#MainBody{
position: relative;
height: 100%;
overflow: auto;
border-bottom: 1px solid #a6a590;
text-align: left;
}
#Navigation{
position: relative;
float: left;
width: 30%;
height: 100%;
left:0%
padding: 0px;
background-color: #f5f7f7;
font: small Verdana,sans-serif;
border-right: 1px solid #a6a590;
border-top: 1px solid #a6a590;
}
#Updates{
position: relative;
float: right;
right: 0%;
width: 20%;
height: 50%;
background-color: #f5f7f7;
font: small Verdana,sans-serif;
border-left: 1px solid #d6d5c0;
border-top: 1px solid #a6a590;
}
</style>
</head>
<body>
<div id="Navigation">
<h2>Navigation</h2>
<p>blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1</p>
</div>
<div id="Updates">
<h2>Updates</h2>
<p>blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3</p>
</div>
<div id="MainBody">
<h2>MainBody</h2>
<p>blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 </p>
</div>
</body>
</html>
