Sidebar not spanning completely to footer

Check out www.amj4silverlake.org

The sidebar should span from just below the header (where it is) to the footer (where it isn't).  Can you please tell me how to modify the code so that I am successful in changing the sidebar.  I'm attaching my layout.layout
Here's the CSS:

body {
      margin: 0;
      padding: 0;
      color: #000;
      background-color: #cc9966;
      background-image: url(_images/amjSLbkgnd.jpg);
      background-repeat: no-repeat;
      height: 342px;
      font-family: Numans, Verdana, Arial, Helvetica, sans-serif;
      font-size: 100%;
      line-height: 1.4;
      font-weight: bold;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
      padding: 0;
      margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
      margin-top: 0;       
      padding-right: 15px;
      padding-left: 15px;
}
a img {
      border: none;
}
a:link {
      color: #42413C;
      text-decoration: underline;
}
a:visited {
      color: #6E6C64;
      text-decoration: underline;
}
a:hover, a:active, a:focus {
      text-decoration: none;
}

.container {
      width: 1000px;
      background: #f7f4ff;
      margin: 0 auto;
      margin-top: 50px;
      -moz-box-shadow: 0px 0px 40px #000000;
      -webkit-box-shadow: 0px 0px 40px #000000;
      box-shadow: 0px 0px 40px #000000;
      font-family: Numans, Verdana, Arial, Helvetica, sans-serif;
}
.header {
      background: #ADB96E url(_images/amjHeader.jpg) no-repeat 0 0;
      height: 342px;
      position:relative;
}

ul.MenuBarHorizontal
{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 80%;
        background-color:#cc9966;
      cursor: default;
      width: auto;
      position:absolute;
      bottom:10px;
}
.sidebar1 {
      float: left;
      width: 314px;
      margin-top: 20px;
      background: #669999;
      padding-bottom: 10px;
      padding-top: 15px;      
}
.content {
      padding: 10px 0;
      width: 686px;
      float: left;
      background-color: #f7f4ff
}

.content ul, .content ol {
      padding: 0 15px 15px 40px;
}

ul.nav {
      list-style: none;
      border-top: 1px solid #666;
      margin-bottom: 15px;
}
ul.nav li {
      border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
      padding: 5px 5px 5px 15px;
      display: block;
      width: 160px;
      text-decoration: none;
      background: #cc9966;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
      background: #ADB96E;
      color: #FFF;
}

.footer {
      padding: 10px 0;
      background: #333366;
      position: relative;
      clear: both;
}
.fltrt {  
      float: right;
      margin-left: 8px;
}
.fltlft {
      float: left;
      margin-right: 8px;
}
.clearfloat {
      clear:both;
      height:0;
      font-size: 1px;
      line-height: 0px;
}
.footertype {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      font-weight: normal;
      text-align: center;
      color: #FFF;
}
-->
</style>
Revolution9Asked:
Who is Participating?
 
rbudjConnect With a Mentor Commented:
You can either take the background of your container div and alter it so that it is blocked off and of the same color of the div's sitting on top (this will give the appearance of stretching to the bottom), or you can manually set a height on the sidebar div to force it to the bottom. Of course, you would have to adjust this height each time you added content but if the page is static then it should be no problem.
0
 
Revolution9Author Commented:
Thanks bro!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.