Title: HTML coding for sidebar
Last modified: August 19, 2016

---

# HTML coding for sidebar

 *  Resolved [crusoe21](https://wordpress.org/support/users/crusoe21/)
 * (@crusoe21)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/)
 * Hi Everyone,
    Here is my blog: [http://www.robintino.co.uk](http://www.robintino.co.uk)
 * Its a travel blog for my journies round SE asia.
 * I was wondering how to force the length of the black sidebar to match the length
   of the page. I think this should be done through the editor pannel in the appearance
   column however my knowledge of HTML is limited.
 * Any guidance would be very much appreciated!
 * Any feedback/impressions are also welcome.
 * Thanks,
 * Crusoe

Viewing 10 replies - 1 through 10 (of 10 total)

 *  [transpersonal](https://wordpress.org/support/users/transpersonal/)
 * (@transpersonal)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049074)
 * I just ran into this problem the other day and found a fix. The only way to achieve
   this is through the use of a background image. Some people think if you use the
   following css: #sidebar {height: 100%;} that it would work but it actually doesn’t.
   The sidebar after all stretches only as long as the content inside it. So anyway
   back to the solution.
 * What you need to do is create a an image that is the same width and color as 
   you sidebar (make it real small in height). I’m not sure how wide your sidebar
   is but suppose it’s 300px and I just checked and your sidebar’s color seems to
   be #323636. So what you need to do is use an image editing program like photoshop,
   fireworks, gimp or even paint and create a rectangle the same width as your sidebar
   and fill it in with the #323636 color. Then open your stylesheet.css and use 
   the following code:
 *     ```
       wrapper {
       background-image: url(IMAGE_FOLDER/IMAGE_NAME.IMAGE_EXTENSION);
       background-repeat: repeat-y;
       float: right;
       }
       ```
   
 * Now I don’t know your div structure so instead of wrapper maybe you need to use
   this css code on main content, or body, or some other div.
 * What this does is give the illusion that the sidebar is continuing all the way
   down the page. It doesn’t actually make the sidebar any longer.
 *  [darran](https://wordpress.org/support/users/darran/)
 * (@darran)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049107)
 * Do take a look at this article on faux columns.
 * [http://www.alistapart.com/articles/fauxcolumns/](http://www.alistapart.com/articles/fauxcolumns/)
 * I am really looking forward to seeing your posts on your holidays, especially
   Singapore since I am from there. It is always nice to hear what tourists have
   to say about our country.
 *  Thread Starter [crusoe21](https://wordpress.org/support/users/crusoe21/)
 * (@crusoe21)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049169)
 * Thanks guys for your input.
 * I opened the style.css and found:
 * /***********************
    * Sidebar * ***********************/ #sidebar { font:
   1.3em ‘Lucida Grande’, Verdana, Arial, Sans-Serif; padding: 10px !important; 
   margin-left: 720px; width: 200px; background: #333 url(‘./images/sidebar.gif’)
   repeat-y; color: #fff !important; } I tried to add the line in here but it made
   everything go messed up. I’d created the file and put it in images folder. Basically
   the sidebar appeared halfway down the page and was really short.
 * I also read from the page Darrent reccomended. However I think on his side its
   a different approach in that he uses a body tag. When I tried to modify my body
   tag I noticed that it just included the fabric textue and nothing else. So couldnt
   add it there either.
 * *Darren
    I’m going in June so won’t post about the trip in the mean time but 
   hold on till then!
 *  [transpersonal](https://wordpress.org/support/users/transpersonal/)
 * (@transpersonal)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049196)
 * Crusoe21, the solution I posted is the same as the one Darran’s link suggests.
   That’s where I got it from originally. Anyway I can’t help you unless you post
   your html code. Open index.php and paste all the code from there. Also paste *
   all* the code from your style.css.
 *  [transpersonal](https://wordpress.org/support/users/transpersonal/)
 * (@transpersonal)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049198)
 * Also upload the background image that you are using to a website like rapidshare.
   com and post the link here. I will need that to make the bg.
 *  Thread Starter [crusoe21](https://wordpress.org/support/users/crusoe21/)
 * (@crusoe21)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049238)
 * Here is the style.css:
 * /*
    Theme Name: Crafty Theme URI: [http://itscalledwebdesign.com/theme/crafty/](http://itscalledwebdesign.com/theme/crafty/)
   Description: A crafty look for all of those crafty WP folks out there. Version:
   0.92 Author: Lloyd Armbrust Author URI: [http://lloydmedia.com/](http://lloydmedia.com/)
   Tags: custom header, fixed width, two columns, widgets, css
 *  Crafty
    [http://itscalledwebdesign.com/](http://itscalledwebdesign.com/)
 *  This theme was designed and built by Lloyd Armbrust,
    with many of the graphic
   elements designed by Rachel Novek. Most of the CSS was adapted from the “Untheme
   two-column” also by Lloyd Armbrust.
 *  You can find Lloyd Armbrust’s sandbox at [http://itscalledwebdesign.com/](http://itscalledwebdesign.com/)
   
   and his website at [http://lloydmedia.com/](http://lloydmedia.com/)
 *  The CSS, XHTML and design is released under GPL:
    [http://www.opensource.org/licenses/gpl-license.php](http://www.opensource.org/licenses/gpl-license.php)
 * */
 * /***********************
    * Style.css * ***********************/ body { font-
   size: 62.5%; /* What did one em say to another? Who’s your daddy?! */ font-family:‘
   Lucida Grande’, Verdana, Arial, Sans-Serif; color: #333; text-align: center; 
   margin: 0; padding: 0; background: #fff url(‘./images/back.jpg’) repeat; }
 * #page {
    background: transparent url(‘./images/content.png’) repeat-y; margin:
   0 auto; padding: 0; padding-top: 113px !important; width: 960px; text-align: 
   left; margin-bottom: -20px; }
 *  /***********************
    * Blocks * ***********************/ hr { display: 
   none; }
 *  small {
    font-family: Arial, Helvetica, Sans-Serif; font-size: 0.9em; line-height:
   1.5em; }
 *  .hidden {
    display: none; }
 *  .clear {
    clear: both; }
 *  /***********************
    * Alignment * ***********************/ .alignright{
   float: right; }
 *  .alignleft {
    float: left }
 *  .aligncenter,
    div.aligncenter { display: block; margin-left: auto; margin-right:
   auto; }
 *  .center {
    text-align: center; }
 *  /***********************
    * Headings * ***********************/ h1 { font-size:
   3.3em; padding-top: 0; margin: 0; }
 *  h2 {
    font-size: 1.6em; margin: 30px 0 0; }
 *  h2.pagetitle {
    font-size: 1.6em; margin-top: 30px; text-align: center; }
 *  h3 {
    font-size: 1.3em; padding: 0; margin: 30px 0 0; }
 *  h1, h2, h3 {
    font-family: ‘Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, 
   Sans-Serif; font-weight: bold; }
 *  h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
    text-decoration:
   none; color: white; }
 *  h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
    color: #333; }
 *  h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar
   h2, #wp-calendar caption, cite {
    text-decoration: none; }
 *  /***********************
    * Links * ***********************/ a, h2 a:hover, 
   h3 a:hover { color: #06c; text-decoration: none; }
 *  a:hover {
    color: #147; text-decoration: underline; }
 *  /***********************
    * Lists * ***********************/ html>body .entry
   ul { margin-left: 0px; padding: 0 0 0 30px; list-style: none; padding-left: 10px;
   text-indent: -10px; }
 *  html>body .entry li {
    margin: 7px 0 8px 10px; }
 *  /***********************
    * Misc * ***********************/ code { font: 1.1em‘
   Courier New’, Courier, Fixed; }
 *  acronym, abbr, span.caps {
    font-size: 0.9em; letter-spacing: .07em; }
 *  acronym, abbr, span.caps {
    cursor: help; }
 *  acronym, abbr {
    border-bottom: 1px dashed #999; }
 *  blockquote {
    margin: 15px 30px 0 10px; padding-left: 20px; border-left: 5px
   solid #ddd; }
 *  blockquote cite {
    margin: 5px 0 0; display: block; }
 * /***********************
    * Header * ***********************/ #keel { display:
   block; height: 125px; width: 100%; background: transparent url(‘./images/header.
   png’) top center repeat-x; position: absolute; top: 0; left: 0;
 *  }
 * #headerimg {
    float: left; clear: none; margin-right: 15px; }
 * #headerimg .description {
    font-size: 1.2em; text-align: left; }
 * #header {
    padding: 10px; height: 80px; width: 940px; margin: 0 auto; }
 *  /***********************
    * Nav bar * ***********************/
 *  #nav {
    height: 30px; padding: 10px 0 0 25px; }
 *  #nav ul {
    list-style: none; margin: 0; margin-left: auto; margin-right: auto;
   text-align: center; }
 *  #nav li {
    float: left; padding: 0 9px; }
 *  #nav a {
    display: block; font: bold 1.2em Arial, san-serif; text-transform:
   uppercase; font-weight: bold; color: #fff; text-align: center; line-height: 30px;
   vertical-align: middle; }
 *  #nav a:hover {
    line-height: 30px; vertical-align: middle; color: #999; text-
   decoration: none !important; }
 * /***********************
    * Content * ***********************/ #content { font-
   size: 1.2em; background: transparent url(‘./images/recycle.png’) 650px 4px no-
   repeat; }
 *  /***********************
    * Narrow Column * ***********************/ .narrowcolumn{
   float: left; padding: 0 0 20px 65px; margin: 0px 0 0; width: 635px; }
 *  .narrowcolumn .postmetadata {
    text-align: center; padding-top: 5px; }
 *  .narrowcolumn .entry, .widecolumn .entry {
    line-height: 1.4em; }
 *  /***********************
    * Wide Column * ***********************/ .widecolumn{
   line-height: 1.6em; padding: 10px 20px 20px 0; margin: 5px 0 0 150px; width: 
   630px; }
 *  .widecolumn .entry p {
    font-size: 1.05em; }
 *  .widecolumn .post {
    margin: 0; } .widecolumn .postmetadata { margin: 30px 0;}
 *  .widecolumn .attachment {
    text-align: center; margin: 5px 0px; }
 *  .widecolumn .smallattachment {
    text-align: center; float: left; width: 128px;
   margin: 5px 5px 5px 0px; }
 *  /***********************
    * Entry * ***********************/ .entry p a:visited{
   color: #b85b5a; }
 *  .entry ol {
    padding: 0 0 0 35px; margin: 0; }
 *  .entry ol li {
    margin: 0; padding: 0; }
 *  .entry ul li:before, #sidebar ul ul li:before {
    content: “0BB 020”; }
 *  /***********************
    * Post * ***********************/ .post { margin: 
   0 0 40px; text-align: justify; }
 *  .post h2 {
    font-size: 1.9em; width: 100%; border-bottom: 1px dotted #333;
 *  }
 *  .post h2 a {
 *  }
 *  .postmetadata {
    clear: both; background: transparent url(‘./images/ribbondiv.
   gif’) no-repeat; height: 81px; padding-top: 29px !important; color: #fff; }
 *  .postmetadata ul, .postmetadata li {
    display: inline; list-style-type: none;
   list-style-image: none; }
 *  .postmetadata a {
    color: #fff; font-weight: bolder; text-decoration: underline;}.
   alt { background-color: #f8f8f8; border-top: 1px solid #ddd; border-bottom: 1px
   solid #ddd; }
 *  /***********************
    * Images * ***********************/ a img { border:
   none; }
 *  p img {
    padding: 0; max-width: 100%; }
 *  img.centered {
    display: block; margin-left: auto; margin-right: auto; }
 *  img.alignright {
    padding: 4px; margin: 0 0 2px 7px; display: inline; }
 *  img.alignleft {
    padding: 4px; margin: 0 7px 2px 0; display: inline; }
 *  /***********************
    * Image Captions * ***********************/
 *  .wp-caption {
    border: 1px solid #ddd; text-align: center; background-color:#
   f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-
   radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
 *  .wp-caption img {
    margin: 0; padding: 0; border: 0 none; }
 *  .wp-caption p.wp-caption-text {
    font-size: 11px; line-height: 17px; padding:
   0 4px 5px; margin: 0; }
 * /***********************
    * Sidebar * ***********************/ #sidebar { font:
   1.3em ‘Lucida Grande’, Verdana, Arial, Sans-Serif; padding: 10px !important; 
   margin-left: 720px; width: 200px; background: #333 url(‘./images/sidebar.gif’)
   repeat-y; color: #fff !important; }
 * #sidebar #searchform #s {
    width: 108px; padding: 2px; }
 * #sidebar #searchsubmit {
    padding: 1px; }
 * #sidebar h2 {
    font-family: ‘Lucida Grande’, Verdana, Sans-Serif; font-size: 
   1.2em; margin: 5px 0 0; padding: 0; color: #fefdf6; }
 * #sidebar form {
    margin: 0; }
 * #sidebar ul, #sidebar ul ol {
    margin: 0; padding: 0; }
 * #sidebar ul li {
    list-style-type: none; list-style-image: none; margin-bottom:
   15px; }
 * #sidebar ul p, #sidebar ul select {
    margin: 5px 0 8px; }
 * #sidebar ul ul, #sidebar ul ol {
    margin: 5px 0 0 10px; }
 * #sidebar ul ul ul, #sidebar ul ol {
    margin: 0 0 0 10px; }
 * ol li, #sidebar ul ol li {
    list-style: decimal outside; }
 * #sidebar ul ul li, #sidebar ul ol li {
    margin: 3px 0 0; padding: 0; }
 * mall, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote,
   strike {
    color: #009ad7;
 *  }
    #sidebar a { color: #fff !important; text-decoration: underline; }
 *  /***********************
    * Search * ***********************/ #searchform { 
   margin: 10px auto; padding: 5px 3px; text-align: center; }
 *  .entry form { /* This is mainly for password protected posts, makes them look
   better. */
    text-align:center; }
 *  select {
    width: 130px; }
 *  /***********************
    * Calendar * ***********************/ #wp-calendar{
   empty-cells: show; margin: 10px auto 0; width: 155px; }
 *  #wp-calendar a {
    text-decoration: none; display: block; }
 *  #wp-calendar caption {
    font: bold 1.3em ‘Lucida Grande’, Verdana, Arial, Sans-
   Serif; text-align: center; text-align: center; width: 100%; }
 *  #wp-calendar th {
    font-style: normal; text-transform: capitalize; }
 *  #wp-calendar td {
    padding: 3px 0; text-align: center; }
 *  #wp-calendar td.pad:hover { /* Doesn’t work in IE */
    background-color: #fff;}
 *  #wp-calendar #prev a, #wp-calendar #next a {
    font-size: 9pt; }
 *  #wp-calendar #next a {
    padding-right: 10px; text-align: right; }
 *  #wp-calendar #prev a {
    padding-left: 10px; text-align: left; }
 * /***********************
    * Comments * ***********************/ h3.comments {
   padding: 0; margin: 40px auto 20px ; } .commentlist { padding: 0; text-align:
   justify; }
 * .commentlist li, #commentform input, #commentform textarea {
    font: 0.9em ‘Lucida
   Grande’, Verdana, Arial, Sans-Serif; }
 * .commentlist li {
    font-weight: bold; margin: 15px 0 3px; padding: 5px 10px 3px;
   list-style: none; }
 * .commentlist li .avatar {
    float: right; border: 1px solid #eee; padding: 2px;
   background: #fff; }
 * .commentlist cite, .commentlist cite a {
    font-weight: bold; font-style: normal;
   font-size: 1.1em; }
 * .commentlist p {
    font-weight: normal; line-height: 1.5em; text-transform: none;
   margin: 10px 5px 10px 0; }
 * #commentform #submit {
    margin: 0; float: right; }
 * #commentform p {
    font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif; margin:
   5px 0; }
 * #commentform input {
    width: 170px; padding: 2px; margin: 5px 5px 1px 0; }
 * #commentform textarea {
    width: 100%; padding: 2px; }
 * .nocomments {
    text-align: center; margin: 0; padding: 0; }
 * .commentmetadata {
    margin: 0; display: block; font-weight: normal; }
 * .alt {
    margin: 0; padding: 10px; }
 * /***********************
    * Footer * ***********************/ #footer { border:
   none; padding: 20px; padding-bottom: 60px; margin: 0 auto; width: 700px; clear:
   both; position: relative; left: -82px; }
 * #footer p {
    margin: 0; padding: 20px 0; text-align: center; }
 * #bottomnav {
    margin: auto 0; padding: 0; text-align: center; font-size: 1.1em;
   font-weight: bold; }
 * #bottomnav ul {
    margin: auto 0; display: inline; list-style: none; padding: 
   0; border: none; }
 * #bottomnav li {
    display: inline; padding: 0 9px;
 *  }
 * #footer a {
    color: #000; font-size: .8 em; }
 * #footer hr {
    display: block; border: none; background: transparent url(‘./images/
   flowerdiv.jpg’) no-repeat; height: 5px; }
 * #copyright {
    background: transparent url(‘./images/blackdivtop.png’) center 
   50px no-repeat; height: 30px; }
 * #wordpress a {
    display: block; background: transparent url(./images/sticker.
   png) no-repeat top center!important; width: 62px; height: 62px; margin: 10px;
   text-decoration: none; margin: -20px auto -30px auto !important; }
 * #wordpress a:hover {
    background: transparent url(./images/sticker.png) no-repeat
   bottom center!important; }
 * /*
 * You got to admit: though overused, Kubrick is pretty clean.
    I just rearranged
   it to make a more generic starting place for WP designers.
 * */
 *  Thread Starter [crusoe21](https://wordpress.org/support/users/crusoe21/)
 * (@crusoe21)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049239)
 * Here is the index php:
 * <?php get_header(); ?>
 *  <div id=”content” class=”narrowcolumn”>
 *  <?php if (have_posts()) : ?>
 *  <?php while (have_posts()) : the_post(); ?>
 *  <div class=”post” id=”post-<?php the_ID(); ?>”>
    <h2>” rel=”bookmark” title=”
   Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?>
   </h2
   >
    <small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small
   >
 *  <div class=”entry”>
    <?php the_content(‘Read the rest of this entry »’); ?> 
   </div>
 *  <p class=”postmetadata”>Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘
   Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’,‘%
   Comments »’); ?></p>
    </div>
 *  <?php endwhile; ?>
 *  <div class=”navigation”>
    <div class=”alignleft”><?php next_posts_link(‘« Older
   Entries’) ?></div> <div class=”alignright”><?php previous_posts_link(‘Newer Entries»’)?
   ></div> </div>
 *  <?php else : ?>
 *  <h2 class=”center”>Not Found</h2>
    <p class=”center”>Sorry, but you are looking
   for something that isn’t here.</p> <?php include (TEMPLATEPATH . “/searchform.
   php”); ?>
 *  <?php endif; ?>
 *  </div>
 * <?php get_sidebar(); ?>
 * <?php get_footer(); ?>
 *  Thread Starter [crusoe21](https://wordpress.org/support/users/crusoe21/)
 * (@crusoe21)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049240)
 * This is were I got stuck tbh. I don’t have one background image to repeat. I 
   understood the theory that you both mentioned.
 * HOWEVER, from my understanding there is not 1 background image like you said 
   but several… I didnt know how to use just one while maintaining the same look
   of my page….
 * [http://rapidshare.com/files/221600174/back.jpg.html](http://rapidshare.com/files/221600174/back.jpg.html)
 * [http://rapidshare.com/files/221600560/sidebar.gif.html](http://rapidshare.com/files/221600560/sidebar.gif.html)
 * Thanks,
 * Crusoe
 *  [transpersonal](https://wordpress.org/support/users/transpersonal/)
 * (@transpersonal)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049257)
 * This was tough since your theme uses many div overlays as well as multiple background
   images. Since your sidebar used a patterned gradient I had to make a few changes
   to the layout and design. But I think it looks better now nonetheless.
 * Steps:
 * 1. Backup your old style.css just in case.
 * 2. Upload and replace your old style.css with the new one.
 * 3. Upload the image to your theme’s images directory.
 * Here’s the zipped file that contains your stylesheet and image:
 * [http://rapidshare.com/files/221750121/New_Folder.zip.html](http://rapidshare.com/files/221750121/New_Folder.zip.html)
 *  Thread Starter [crusoe21](https://wordpress.org/support/users/crusoe21/)
 * (@crusoe21)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049259)
 * Thanks very much Transpersonal. I really appreciate it.
 * I put the files in and now the side bar goes all the way down.
 * Unfortunately the patterned overlay has disappered, however, it doesnt bother
   me that much.
 * Here is the finished site [http://www.robintino.co.uk](http://www.robintino.co.uk)
 * Theres a few things I’d change if I had the time:
 * *The google add needs centering
    *The other google add is too big at the bottom
 * actually, theres not too much wrong with it anymore!All I need now is some content
   to put on it!
 * Thanks once again for your efforts.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘HTML coding for sidebar’ is closed to new replies.

## Tags

 * [appearance](https://wordpress.org/support/topic-tag/appearance/)
 * [editor](https://wordpress.org/support/topic-tag/editor/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [sidebar](https://wordpress.org/support/topic-tag/sidebar/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 10 replies
 * 3 participants
 * Last reply from: [crusoe21](https://wordpress.org/support/users/crusoe21/)
 * Last activity: [17 years, 1 month ago](https://wordpress.org/support/topic/html-coding-for-sidebar/#post-1049259)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics