Sidebar not spanning completely to footer

Posted on 2012-09-21
Last Modified: 2012-09-25
Check out

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

    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

    Thanks bro!

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    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…
    Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
    Sending a Secure fax is easy with eFax Corporate ( First, Just open a new email message.  In the To field, type your recipient's fax number You can even send a secure international fax — just include t…
    In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

    734 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

    Need Help in Real-Time?

    Connect with top rated Experts

    26 Experts available now in Live!

    Get 1:1 Help Now