Sidebar not spanning completely to footer

Posted on 2012-09-21
Medium Priority
Last Modified: 2012-09-25
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;

      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 80%;
      cursor: default;
      width: auto;
.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 {
      font-size: 1px;
      line-height: 0px;
.footertype {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      font-weight: normal;
      text-align: center;
      color: #FFF;
Question by:Revolution9
LVL 16

Accepted Solution

rbudj earned 2000 total points
ID: 38433163
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.

Author Closing Comment

ID: 38433285
Thanks bro!

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
Is your data getting by on basic protection measures? In today’s climate of debilitating malware and ransomware—like WannaCry—that may not be enough. You need to establish more than basics, like a recovery plan that protects both data and endpoints.…
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question