11 Replies Latest reply on Mar 14, 2010 4:51 PM by Laura324

    Sidebar isn't full length of page

    Laura324

      Hi, I have a site that has a right sidebar that is not showing the background color down the same length as the left side of the page.  Both the left and right backgrounds should be the same color so I don't think I need to do the trick listed in http://www.alistapart.com/articles/fauxcolumns/.  There must be something basic I'm missing.

       

      I believe I have a div "mainContent" that shows a background color, and "leftContent" floats left, and "rightSidebar" floats right.  It seems like this should do the trick, but it's not enough.

       

      I suppose I should have used one of the templates.  (Although everything looked fine until I went to my next page that had a different amount of content in the sidebar.  Doh!)  I've tried to compare to the "two column fixed right header" template, but I can't for the life of me figure out what's the key different ingredient.

       

      The bulk of this website is behind a passworded file, but I think I copied enough up to http://laurabentley.com/test/instructors.html for you to be able to see what's going on.  I suppose I should also post the CSS.  See below.

       

      Any help appreciated.

      Thx!  --Laura

       

       

      @charset "utf-8";
      /* CSS Document */
      
      /* reset - to reset default CSS settings that annoying */
      html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { color: #000; margin: 0; padding: 0; }
      h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
      ul,ol { list-style: none; }
      fieldset,img { border: none; }
      caption,th { text-align: left; }
      table { border-collapse: collapse; }
      td,th { vertical-align: top; }
      /* general formatting */
      body {
       background-color: #3e3f36;
       margin: 0;
       padding:0;
       font-family: Arial, Helvetica, sans-serif;
       font-size:13px;
      }
      h1 {
       font-family: Arial, Helvetica, sans-serif;
       font-size:21px;
       color:#3E3F36;
       padding-top: 4px;
       padding-bottom: 6px;
       padding-left: 20px;
       font-weight: bold;
      }
      h2 {
       font-family: Arial, Helvetica, sans-serif;
       font-size:15px;
       color:#400101;
       padding-top: 11px;
       padding-bottom: 1px;
       padding-left: 20px;
       font-weight: bold;
      }
      p {
       padding-left: 20px;
       padding-right: 20px;
       padding-bottom: 7px;
       font-family: Arial, Helvetica, sans-serif;
       font-size:13px;
       color:#1D1C1B;
      }
      #wrapper {
       width: 966px;
       margin: 0px auto;
       background-color: #EFEEE6;
      }
      .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
       clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
      }
      /* masthead with logo */
      #masthead {
       float: none;
       height: 95px;
       width: 966px;
       margin-right: auto;
       margin-left: auto;
       background-image: url(../images/Masthead.gif);
       list-style-type: none;
      }
      /* Sub navigation on top right */
      #subNav {
       padding:1px;
       margin:0;
       text-align: right;
       list-style-type: none;
      }
      #subNav li {
       display:inline;
       padding:15px;
       color: #E3E2D8;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 11px;
      }
      #subNav ul li a {color: #E3E2D8; text-decoration: none;}
      #subNav ul li a:link { color: #E3E2D8; text-decoration: none;}
      #subNav ul li a:visited { color: #E3E2D8; text-decoration:none;}
      #subNav ul li a:hover { color: #E3E2D8; text-decoration:underline;}
      #subNav ul li a:active { color: #E3E2D8; text-decoration:underline;}
      /* main navigation */
      #nav {
       background-color: #450A02;
       float: none;
       height: 32px;
       width: 966px;
       padding: 0px;
      }
      /* major photo area */
      #photo {
       clear: both;
       height: 188px;
       width: 966px;
       background-image: none;
      }
      #photoDivider {
       background-color: #450a02;
       clear: both;
       height: 8px;
       width: 966px;
       float: none;
       margin: auto;
      }
      /* main content area */
      #mainContent {
       width: 966px;
       float: none;
       margin: auto;
       background-color: EFEEE6;
      }
      /* left content */
      /* note that some of text formatting for this area is up in general formatting */
      #leftContent {
       background-color: #EFEEE6;
       float: left;
       width: 644px;
      }
      #crumbsNav {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 11px;
       padding-left: 3px;
       padding-top: 4px;
       padding-bottom: 4px;
      }
      #crumbsNav ul li {
       display:inline;
       color: #8D6A00;
      } 
      #crumbsNav ul li a {color: #3E3f36; text-decoration: none;}
      #crumbsNav ul li a:link { color: #3E3f36; text-decoration: none;}
      #crumbsNav ul li a:visited { color: #3E3f36; text-decoration:none;}
      #crumbsNav ul li a:hover { color: #3E3f36; text-decoration:underline;}
      #crumbsNav ul li a:active { color: #3E3f36; text-decoration:underline;}
      #crumbsNav li:before {
       content: "/";
       padding-right: 9px;
       padding-left: 6px;
       color: #3E3f36;
      }
      #crumbsNav li:first-child:before { content: ""; }
      #dividerBar {
       height: 2px;
       background-color: #3E3F36;
       float: right;
       width: 604px;
       padding-left: 20px;
      }
      /* right content */
      #rightSidebar {
       background-color: #99F;
       float: right;
       width: 322px;
      }
      #sidebarContent {
       background-color: #EFEEE6;
       width: 270px;
       padding-top: 24px;
       padding-right: 26px;
       padding-left: 26px;
       float: right;
      }
      #sidebarCalMain {
       height: 335px;
       width: 270px;
      }
      .sidebarCalHeading {
       background-color: #731702;
       height: 17px;
       width: 258px;
       font-family: Tahoma, Geneva, sans-serif;
       font-size: 15px;
       color: #FDF6C4;
       padding-top: 6px;
       padding-bottom: 8px;
       padding-left: 12px;
      }
      .sidebarCalFooter {
       background-color: #731702;
       height: 11px;
       width: 258px;
       font-family: Tahoma, Geneva, sans-serif;
       font-size: 11px;
       color: #FDF6C4;
       padding-top: 6px;
       padding-bottom: 8px;
       padding-left: 12px;
      }
      #sidebarStayConnected {
       background-color: #933;
       height: 96px;
       width: 270px;
       margin-top: 20px;
      }
      /* footer area */
      #footer {
       background-color: #1b170E;
       clear: both;
       height: 32px;
       width: 966px;
       color: #E3E2D8;
       margin: auto;
      }
      #footerNav {
       margin:0;
       padding-top: 5px;
       padding-left: 4px;
      }
      #footerNav li {
       display:inline;
       list-style:none;
       padding-right:0; 
       color: #E3E2D8;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 11px;
       text-align: left;
       list-style-type: none;
      }
      #footerNav ul li a {color: #E3E2D8; text-decoration: none;}
      #footerNav ul li a:link { color: #E3E2D8; text-decoration: none;}
      #footerNav ul li a:visited { color: #E3E2D8; text-decoration:none;}
      #footerNav ul li a:hover { color: #E3E2D8; text-decoration:underline;}
      #whiteSpaceBottom {
       height: 50px;
      }
      #footerNav ul li a:active { color: #E3E2D8; text-decoration:underline;}
      #footerNav li:before {
       content: "|";
       padding-right: 9px;
       padding-left: 6px;
       color: #E3E2D8;
      }
      #footerNav li:first-child:before { content: ""; }
      
      
        • 1. Re: Sidebar isn't full length of page
          BenPleysier Adobe Community Professional & MVP

          Laura324 wrote:

           

          Hi, I have a site that has a right sidebar that is not showing the background color down the same length as the left side of the page.  Both the left and right backgrounds should be the same color so I don't think I need to do the trick listed in http://www.alistapart.com/articles/fauxcolumns/.  There must be something basic I'm missing.

           

          I believe I have a div "mainContent" that shows a background color, and "leftContent" floats left, and "rightSidebar" floats right.  It seems like this should do the trick, but it's not enough.

           

          I suppose I should have used one of the templates.  (Although everything looked fine until I went to my next page that had a different amount of content in the sidebar.  Doh!)  I've tried to compare to the "two column fixed right header" template, but I can't for the life of me figure out what's the key different ingredient.

           

          The bulk of this website is behind a passworded file, but I think I copied enough up to http://laurabentley.com/test/instructors.html for you to be able to see what's going on.  I suppose I should also post the CSS.  See below.

           

          Any help appreciated.

          Thx!  --Laura


          I used to use the fauxcolumns method but found it in some instances too restrictive. For instance I could not use it in case of elastic layouts. The best way round the problem is to set the height of both columns for each page. This also is a pain but at least it is do-able.

           

          <div id="mainContent" style="height: 300px;">
          <div id="rightSidebar" style="height: 300px;">

          I hope this helps.
          Ben
          1 person found this helpful
          • 2. Re: Sidebar isn't full length of page
            Nancy OShea Adobe Community Professional & MVP
            I used to use the fauxcolumns method but found it in some instances too restrictive. For instance I could not use it in case of elastic layouts. The best way round the problem is to set the height of both columns for each page. This also is a pain but at least it is do-able.

             

            <div id="mainContent" style="height: 300px;">
            <div id="rightSidebar" style="height: 300px;">

            I hope this helps.
            Ben

             

            Hi Ben,

            I don't recommend your solution.  Height in pixels is a restriction in all but IE browsers so when content exceeds available space, your text will have no place to go.  Min-height is a better choice for browsers that support it.  JavaScript is another solution.

             

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com

            • 3. Re: Sidebar isn't full length of page
              Nancy OShea Adobe Community Professional & MVP

              Hi, I have a site that has a right sidebar that is not showing the background color down the same length as the left side of the page.  ...There must be something basic I'm missing.

              To see the background, put some Lorem ipsum (dummy text) or other content in your right side division.

              Table columns are equal height by nature but CSS columns are not. To achieve symmetry, you will need to use one of the following workarounds.

               

              Faux Columns
              http://forums.adobe.com/message/2653416#2653416

              JavaScript
              http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              1 person found this helpful
              • 4. Re: Sidebar isn't full length of page
                BenPleysier Adobe Community Professional & MVP

                Nancy O. wrote:


                 

                Hi Ben,

                I don't recommend your solution.  Height in pixels is a restriction in all but IE browsers so when content exceeds available space, your text will have no place to go.  Min-height is a better choice for browsers that support it.  JavaScript is another solution.

                 

                Nancy,

                 

                I am not a JavaScript expert and writing a script would be out of the question. The PVII solution untill now was an unknown, hence my use of the height method. Thank you very much for pointing me in the right direction, very much appreciated.

                 

                Ben

                • 5. Re: Sidebar isn't full length of page
                  Laura324 Level 1

                  Thank you both.  I'll take a look and what you describe.

                   

                  However, what's strange to me is that it looks like the template in Dreamweaver named "2 column fixed, right sidebar, header and footer" does behave in a desired way.  (for me both left and right are same color, so as long as it draws to bottom I'm fine).  So I would think there should be a pure HTML, CSS solution, although I can't figure out how my page is different from the templates. Maybe I need to start plugging my content into the template to figure out why.

                  • 6. Re: Sidebar isn't full length of page
                    martcol Level 4
                    #mainContent {
                    float:none;
                    margin:auto;
                    width:966px;
                    background-color: #EFEEE6
                    }

                    Any good?

                    Martin
                    • 7. Re: Sidebar isn't full length of page
                      Laura324 Level 1

                      Looked at the template I mentioned, it looks like what they do is have the rightSidebar be a certain width and float right.  But the mainContent instead of being the width of just left area, it is the width of the entire page with the right margin set to be the same a the rightSidebar width.  That way content from the left doesn't go over into the sidebar area.

                       

                      With putting different background colors in just to see what area was what, I don't think this would work if you wanted the left and right different colors, but since both of mine are the same color, it might work.

                      • 8. Re: Sidebar isn't full length of page
                        Laura324 Level 1

                        Hmm, I added the missing #, and switched the items to the order you presented, but

                        still no luck.  Thx for spotting the missed #.

                        • 9. Re: Sidebar isn't full length of page
                          martcol Level 4

                          Laura

                           

                          I think the solution to your problem isn't that difficult and I've a feeling you might be making it more complicated that it need be.

                           

                          First off, your HTML is a bit awry which, you can check in the validator.  However looking at this snippet:

                           

                          <div id="leftContent">
                          <div id="crumbsNav">
                          <ul id="crumbsNav">    
                          <li class="rumbsNav li a"><a href="/~dancewo2/beta/index.html" title="Home">Home</a></li>
                          <li>Instructors</li>
                          </ul>                         
                          </div>

                           


                          You can't have an id more than once so your crumbsNav ought to be a class or something different on each element.  You also have class="rumbsNav" which I suspect is a typo although I didn't check.

                           

                          Somewhere in the page, you have too many closing elements or a mismatch of somekind.  I don't have time to hunt that down.

                           

                          In my suggestion all that it is doing is adding your chosen color to the containing element for your sidebar and your content area.  It should work.

                           

                          Martin

                           

                          PS - I would be interested to know what you are trying to achieve with class="rumbsNav li a"    You don't need to declare li or a in a class.  I can't think of a reason for doing that way but I accept there might be one!

                          • 10. Re: Sidebar isn't full length of page
                            Laura324 Level 1

                            Thanks!  Yes, I thought I was being so careful, but I guess it shows how easy it is for things to get awry.  This was a good newbie lesson in commenting div tags (unless you experts have a better way) to keep track of what's what, and to take advantage of the validation tab to check out potential errors.

                             

                            Indeed, getting rid of two extra closing div tags solved the problem!

                             

                            I'll also note that the DW template I was looking at also had something that solved my problem before seeing martcol's post.

                            in the HTML, placed immediately after the div that was floated right:

                            <br class="clearfloat" />

                             

                            in the CSS:

                            .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
                             clear:both;
                                height:0;
                                font-size: 1px;
                                line-height: 0px;
                            }

                             

                            However using this to solve it was just masking the fact that I had some extra closing divs.  But I'll mention it in case it helps someone else.

                             

                            Thanks again for everyone's help.  I shall comment and validate before propogating this page to other pages, and before the next time I post. 

                            --Laura

                            • 11. Re: Sidebar isn't full length of page
                              Laura324 Level 1

                              Lastly, yes the class="rumbsNav" was both a typo and leftover from when I thought I might need to solve something with classes, until I realized I didn't need it.  The class was no longer in the CSS, and I missed removing this part.

                               

                              Again, not something extra clever.  Just sloppiness.

                              I will be neater, I will be neater...

                              --Laura