asked on

Extending Sidebar with CSS

I have a page with a wrapper div. In the wrapper I have a sidebar div for the left side navigation and a main div for the content. I am can not figure out how to make the side bar stay even in length with the main page. Right now the sidebar is floating next to the main div.

Things I have tried;
placed the main div inside the sidebar div
set sidebar height to 100% - thought I could extend it to height of the wrapper div.

Any suggestions or code improvements would be appreciated.

#main {
		float:right;
		background:#272727;
		margin:0 auto;
		width:671px;
		border: Solid 1px red;
	
	}
	
	#main H1
	{
    display: block;
	font-family: verdana;
	font-size: 20px;
	color: #fff;
	 }
 
	#sidebar {
	height: 514px;
	width:174px;
	background: black;
	background-image: url(images/leftnavguitar.JPG);
	background-repeat: no-repeat;
	background-position: 0% 100%;
	margin: 0px;
	Padding: 0px;
	border: Solid 1px yellow;
	}
 
 
 
 
 
#sidebar ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
border: Solid 1px green;
}
 
#sidebar li
{
background-image: url(images/nav_arrow.gif);
background-repeat: no-repeat;
 
background-position: 1% 50%;
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 14px;
font-family: verdana;
font-size: .75em;
border: Solid 1px yellow;
}
 
 
#sidebar li A:link{text-decoration: none; color:#fff;}
#sidebar li A:hover {text-decoration: underline; color: #E7B33B;}

Open in new window

LordOfPorts

I would recommend setting the height attribute of the parent element, wrapper div in this case, to 100%. Here is a simple example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
 
<style type="text/css">
#divWrapper, #divSideBar, #divMain {
    height:100%;
    border:1px solid red;
}
 
#divSideBar {
    width:20%;
    float:left;
}
</style>
 
</head>
 
<body>
 
<div id="divWrapper">
 
<div id="divSideBar">
	 Side Bar
</div>
 
<div id="divMain">
	 Navigation
</div>
 
</div>
 
</body>
</html>

Open in new window

svp28

ASKER

The following work

      #Container {
      border: solid 3px blue;
      overflow: auto;
      width: 100%
      height: 100%;
      }

please close this question as I soved the question myself.

ASKER CERTIFIED SOLUTION

Computer101

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial