Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make the sidebar background reach the footer

    Hi, I have a problem with blogger HTML, hope you guys can help me solve it. I have looked every posts regarding this problem, but none the answer actually gave a solution as I hope for.

    Here's my code:

    Code:
    body {
      background:$bgcolor;
      background: url(http://i59.photobucket.com/albums/g290/Fullmoon1412/Destiny%20Project%20v2/Untitled-1.png); repeat-x
      margin:0;
      color:$textcolor;
      font:x-small Georgia Serif;
      font-size/* */:/**/small;
      font-size: /**/small;
      text-align: center;
      }
    a:link {
      color:$linkcolor;
      text-decoration:none;
      }
    a:visited {
      color:$visitedlinkcolor;
      text-decoration:none;
      }
    a:hover {
      color:$titlecolor;
      text-decoration:underline;
    }
    a img {
      border-width:0;
      }
    
    /* Header
    -----------------------------------------------
     */
    
    #header-wrapper {
      width:860px;
      margin:0px;
      border:0px solid $bordercolor;
      }
    
    #header-inner {
      background-position: center;
      margin-left: auto;
      margin-right: auto;
    }
    
    #header { 
      margin: 5px;
      border: 0px solid $bordercolor;
      text-align: center;
      color:$pagetitlecolor;
    }
    
    #header h1 {
      margin:5px 5px 0;
      padding:15px 20px .25em;
      line-height:1.2em;
      text-transform:uppercase;
      letter-spacing:.2em;
      font: $pagetitlefont;
    }
    
    #header a {
      color:$pagetitlecolor;
      text-decoration:none;
      }
    
    #header a:hover {
      color:$pagetitlecolor;
      }
    
    #header .description {
      margin:0 5px 5px;
      padding:0 20px 15px;
      max-width:860px;
      text-transform:uppercase;
      letter-spacing:.2em;
      line-height: 1.4em;
      font: $descriptionfont;
      color: $descriptioncolor;
     }
    
    #header img {
      margin-top: -5px;
      margin-$startSide: 0px;
      margin-$endSide: 0px;
      margin-bottom: -5px;
    }
    
    
    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
      width: 860px;
      margin:0px
      padding:0px
      text-align:$startSide;
      font: $bodyfont;
      }
    
    #main-wrapper {
      width: 520px;
      float: $startSide;
      background: url(http://i59.photobucket.com/albums/g290/Fullmoon1412/Destiny%20Project%20v2/BN-DP130320011-MAIN-WRAPPER.png); repeat-x
      margin-top: 0px;
      margin-$endSide: 20px;
      margin-bottom: 0px;
      margin-$startSide: 34px;
      text-align: justify;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
      }
    
    #sidebar-wrapper {
      width: 271px;
      float: $endSide;
      margin-top: 0px;
      margin-$endSide: 15px;
      margin-bottom: 0px;
      margin-$startSide: 0px;
      text-align: justify;
      background: url(http://i59.photobucket.com/albums/g290/Fullmoon1412/Destiny%20Project%20v2/BN-DP130320011-SIDE-WRAPPER.png); repeat-x
      float: $endSide;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
    }
    
    
    /* Headings
    ----------------------------------------------- */
    
    h2 {
      margin:1.5em 0 .75em;
      font:$headerfont;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color:$sidebarcolor;
    }
    
    
    /* Posts
    -----------------------------------------------
     */
    h2.date-header {
      margin:1.5em 0 .5em;
      }
    
    .post {
      margin: 0px;
      padding-top: 0px;
      padding-$endSide: 20px;
      padding-bottom: 0px;
      padding-$startSide: 50px;
      text-indent: 0px;
      color: $sidebartextcolor;
      line-height: 1.5em;
      }
    .post h3 {
      color: $sidebartextcolor;
      font-size:140%;
      font-weight:normal;
      line-height:1.4em;
      color:$titlecolor;
    }
    
    .post h3 a, .post h3 a:visited, .post h3 strong {
      display:block;
      text-decoration:none;
      color:$titlecolor;
      font-weight:normal;
    }
    
    .post h3 strong, .post h3 a:hover {
      color:$textcolor;
    }
    
    .post-body {
      margin:0 0 .75em;
      line-height:1.6em;
    }
    
    .post-body blockquote {
      line-height:1.3em;  
    }
    
    .post-footer {
      margin: .75em 0;
      color:$sidebarcolor;
      text-transform:uppercase;
      letter-spacing:.1em;
      font: $postfooterfont;
      line-height: 1.4em;
    }
    
    .comment-link {
      margin-$startSide:.6em;
    }
    .post img, table.tr-caption-container {
      padding:4px;
      border:0px solid $bordercolor;
    }
    .tr-caption-container img {
      border: none;
      padding: 0;
    }
    .post blockquote {
      margin:1em 20px;
    }
    .post blockquote p {
      margin:.75em 0;
    }
    
    /* Comments
    ----------------------------------------------- */
    #comments h4 {
      text-align: right;
      padding-$endSide: 20px;
      font-weight: bold;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color: $sidebarcolor;
      }
    
    #comments-block {
      padding-$endSide: 20px;
      padding-$startSide: 10px;
      line-height:1.6em;
      }
    #comments-block .comment-author {
      padding-$endSide: 20px;
      padding-$startSide: 0px;
      }
    #comments-block .comment-body {
      margin:.25em 0 0;
      }
    #comments-block .comment-footer {
      margin:-.25em 0 2em;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.1em;
      }
    
    #comments-block .comment-body p {
      margin:0 0 .75em;
      }
    
    .deleted-comment {
      font-style:italic;
      color:gray;
     }
    
    .comment-form {
      margin-left: 55px;
      }
    
    #blog-pager-newer-link {
      float: $startSide;
      display: none;
      }
    
    #blog-pager-older-link {
      float: $endSide;
      display: none;
      }
    
    #blog-pager {
      text-align: center;
      display: none;
      }
    
    .feed-links {
      clear: both;
      line-height: 2.5em;
    }
    
    /* Sidebar Content
    ----------------------------------------------- */
    .sidebar { 
      margin: 0px;
      padding-top: 0px;
      padding-$endSide: 20px;
      padding-bottom: 0px;
      padding-$startSide: 30px;
      text-indent: 0px;
      color: $sidebartextcolor;
      line-height: 1.5em;
     }
    
    .sidebar ul {
      list-style:none;
      margin:0 0 0;
      padding:0 0 0;
    }
    .sidebar li {
      margin: 0px;
      padding-top: 0px;
      padding-$endSide: 0px;
      padding-bottom: 0px;
      padding-$startSide: 0px;
      text-indent: 0px;
      line-height:1.5em;
      }
    
    .sidebar .widget, .main .widget { 
      border-bottom:0px dotted $bordercolor;
      margin:0px;
      padding:0px;
     }
    
    .main .Blog { 
      border-bottom-width: 0;
    }
    
    
    /* Profile 
    ----------------------------------------------- */
    .profile-img { 
      float: $startSide;
      margin-top: 0;
      margin-$endSide: 5px;
      margin-bottom: 5px;
      margin-$startSide: 0;
      padding: 4px;
      border: 0px solid $bordercolor;
    }
    
    .profile-data {
      margin:0;
      text-transform:uppercase;
      letter-spacing:.1em;
      font: $postfooterfont;
      color: $sidebarcolor;
      font-weight: bold;
      line-height: 1.6em;
    }
    
    .profile-datablock { 
      margin:.5em 0 .5em;
    }
    
    .profile-textblock { 
      margin: 0.5em 0;
      line-height: 1.6em;
    }
    
    .profile-link { 
      font: $postfooterfont;
      text-transform: uppercase;
      letter-spacing: .1em;
    }
    
    /* Footer
    ----------------------------------------------- */
    #footer {
      width:660px;
      clear:both;
      margin:0 auto;
      padding-top:15px;
      line-height: 1.6em;
      text-transform:uppercase;
      letter-spacing:.1em;
      text-align: center;
    }
    As I was saying, the side-bar background, I alrdy use the repeat-x but the result won't change. I want it to be flexible, whatever I'm viewing the comment or the main post contain 5 post.

    Here's is my blogger url : http://diazfieldofdreams.blogspot.com/

    Thank you.
    Last edited by Diaz Flamberge; 04-17-2011 at 04:56 AM.

  • #2
    New Coder
    Join Date
    Oct 2010
    Location
    Like me, on a tiny speck of dust floating in the Virgo Cluster.
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post
    Diaz:

    I was going to take a look at your blog, but apparently you have to accept us to view it?

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry, my mistake..... I re-open the blog >.<

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There is much help here.

    Use the Search facility. Single words often work best.

    Search for Faux Columns

    Check this for example
    Frank
    Last edited by effpeetee; 04-17-2011 at 12:30 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •