Check out my website at:
I'm trying to make the sidebar on my site go all the way down to the footer, or be the same length as my content. I don't want to use JQuery or any other plugins for this. I believe it should be a simple CSS fix, but I'm drawing a blank on how to do it.
<div id = "wrapper">
<header id="name" align="center">MY IS117 Website</header>
<div id="primary_links" align="center">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
<div id="content">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.....
</p>
<p>
Aenean fringilla sed urna a ultrices. Aliquam non augue in libero venenatis sodales...
</p>
...
</div>
<!-- content -->
<div id="sidebar">
<div id="secondary_links">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
</div>
<div id="footer">Footer</div>
</div>
<!-- wrapper -->
CSS
#header {
background-color: cyan;
width: 100px;
height: 100px;
padding: 20px;
margin: 30px;
border: 5px solid;
}
#name {
border: 1px solid;
padding-left: 31px;
padding-right: 31px;
margin-left: auto;
margin-right: auto;
}
#wrapper {
width: 898px;
margin-left: auto;
margin-right: auto;
}
#primary_links li {
display: inline;
}
#primary_links {
height: 75px;
line-height: 75px;
border: 1px solid;
}
#primary_links a {
color: black;
}
#secondary_links ul, #primary_links ul {
margin: 0px;
padding: 0px;
}
#secondary_links li {
list-style: none;
/* gets rid of bullets */;
}
#sidebar {
width: 338px;
float: left;
border: 1px solid;
}
#secondary_links {
/*width:340px; temporary
float:right; put in own div fiix prob*/;
}
#footer {
/*margin-left:508px;
margin-right:230px;*/
clear: both;
background-color: green;
}
#content {
width: 508px;
padding-left: 23px;
padding-right: 23px;
border: 1px solid;
float: left;
}