[jcoxy4]

Ok, if you can help thanks very much.
At www.simple-wds.com/wordpress/ i want the left and right side columns which are a shade of grey to extend all the way down.Currently they stop where the content is.
Heres my css document

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
    margin: 0;
    padding: 0;
}
 
body{
    font-family: Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 12px;
    text-align: center;
    vertical-align: top;
    background: #666 url(images/bg_body.gif)repeat left bottom;
        color: #fff;
}
 
h1, h2, h3, h4, h5, h6{
    font-family: Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 16px;
}
 
a{
    text-decoration: underline;
    color: #105cb6;
}
 
a:hover{ text-decoration: none; }
 
a img{ border: 0; }
 
abbr, acronym{ border: 0; }
 
address, dl, p{ padding: 10px 0 0; }
 
blockquote{
    margin: 10px 10px 0;
    background: #fffada url(images/bg_blockquote.gif) no-repeat 5px 7px;
    color: #736926;
}
 
blockquote p{
    padding: 10px 10px 10px 20px;
}
 
blockquote blockquote{
    margin: 10px 20px;
    background: #fff;
    color: #333;
}
 
blockquote blockquote p{ padding: 10px; }
 
code{
    background: #f9f9f9;
}
 
dt{
    font-weight: bold;
}
 
dd{
    padding: 0 0 5px 15px;
}
 
hr{
    clear: both;
    margin: 15px 0 5px;
    width: 100%;
    border: 0;
    height: 1px;
    text-align: left;
    background: url(images/bg_comment_bottom.gif) no-repeat;
}
 
small{
    font-size: 10px;
}
 
input, textarea{
    font-family: Arial, Helvetica, Georgia, sans-serif;
    font-size: 12px;
    padding: 2px;
}
 
input#author, input#email, input#url, textarea#comment{
    border: 1px solid #cbb945;
    background-color: #fffadb;
    padding: 3px;
}
 
input#author, input#email, input#url{
    margin: 0 5px 0 0;
}
 
#container, #header, #menu, #menu ul li, #menu ul li a, #pagetitle, h1, #syndication, .pagewrapper, .page, .wrapper, .narrowcolumnwrapper, .narrowcolumn, .content, .post, .entry, .browse, sidebar{
    text-align: left;
    vertical-align: top;
}
 
#container{
    margin: 0 auto;
    width: 904px;
    padding: 10px 0 0;
}
 
#header{
    margin: 0 0 10px;
    float: left;
    width: 904px;
    height: 250px;
    background: url(images/bg_header.gif) no-repeat left bottom;
    color: #333;
}
 
#menu ul{
    margin: 0;
    padding: 0 0 0 10px;
    list-style: none;
}
 
#menu ul li{
    float: left;
    margin: 0 5px 0 0;
    font-size: 14px;
    font-weight: bold;
    background: url(images/bg_tab_right.gif) no-repeat right top;
    color: #325b0a;
}
 
#menu ul li a{
    display: block;
    padding: 14px 20px 10px;
    text-decoration: none;
    background: url(images/bg_tab_left.gif) no-repeat left top;
    color: #325b0a;
}
 
#menu ul li a:hover{
    text-decoration: underline;
}
 
#pagetitle{
    clear: both;
    width: 904px;
    height: 155px;
}
 
#pagetitle h1{
    padding: 36px 28px 0;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}
 
#pagetitle h1 a{
    text-decoration: none;
    color: #fff;
}
 
#syndication{
    float: left;
    padding: 15px 31px 0;
    color: #999;
}
 
#syndication a{ color: #666; }
 
#syndication a.feed{
    padding: 0 0 0 19px;
    background: url(images/feed_icon.png) no-repeat 0 1px;
}
 
#searchbox{
    float: right;
    padding: 10px 31px 0;
}
 
#searchbox input#s{
    border: 1px solid #ddd;
    padding: 3px;
    background: #fff;
}
 
#searchbox input#searchsubmit{ height: 24px; }
 
.pagewrapper{
    margin: 0 0 10px;
    float: left;
    width: 904px;
    background: #fff url(images/bg_page_bottom.gif) no-repeat left bottom;
    color: #333;
}
 
.page{
    float: left;
    padding: 0 5px 5px;
    background: url(images/bg_page_top.gif) no-repeat;
}
 
.wrapper{ /* This wrapper class appears only on Page and Single Post pages. */
    float: left;
    width: 500px;
}
 
.narrowcolumnwrapper{
    margin: 5px 0 0;
    float: left;
    width: 500px;
    background: #fff url(images/bg_narrowcol.gif) repeat-y;
}
 
.narrowcolumn{
    float: left;
    width: 500px;
    background: url(images/bg_narrowcol_bottom.gif) no-repeat left bottom;
}
 
.content{
    float: left;
    width: 500px;
    background: url(images/bg_narrowcol_top.gif) no-repeat left top;
}
 
.post{
    padding: 9px 16px 15px;
    line-height: 18px;
}
 
.post h2{
    padding: 0 0 2px;
    font-size: 16px;
    font-weight: bold;
    line-height: 27px;
}
 
.post h2 a{
    text-decoration: none;
    color: #105cb6;
    border-bottom: 1px solid #75abea;
}
 
.post img{
    padding: 4px;
    border: 1px solid #ddd;
    background: #fff;
}
 
.post img.alignleft{
    float: left;
    margin: 5px 10px 0 0;
}
 
.post img.alignright{
    float: right;
    margin: 5px 0 0 10px;
}
 
.post img.wp-smiley{
    padding: 0;
    border: 0;
    background: none;
}
 
.entry{}
 
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
    padding: 9px 0 0;
}
 
.entry h1{
    font-size: 20px;
    line-height: 30px;
}
 
.entry h2{ line-height: 18px; }
 
.entry h3{ font-size: 14px; }
 
.entry h4{ font-size: 12px; }
 
.entry h5{ font-size: 11px; }
 
.entry h6{ font-size: 10px; }
 
.postinfo{
    font-size: 11px;
    color: #999;
}
 
.postinfo a{
    color: #578cca;
}
 
.postdate{ color: #a12a2a; }
 
.browse{
    border-top: 1px solid #bdbdbd;
    padding: 15px 16px;
    line-height: 18px;
}
 
.sidebar, .obar{
    margin: 0 0 0 5px;
    float: right;
    width: 192px;
    line-height: 18px;
        
}
 
.obar{
    margin: 0 5px 0 0;
    float: left;
}
 
.sidebar ul, .obar ul{
    margin: 0;
    padding: 0;
    list-style: none;
        
}
 
.sidebar ul li, .obar ul li{
    margin: 5px 0 0;
    padding: 9px 16px 15px;
    background: #EFEFEF url(images/bg_ul_li.gif) no-repeat left top;
}
 
.sidebar ul li.widget_search, .obar ul li{
    padding: 15px 16px;
}
 
.sidebar ul li h2, .obar ul li h2{
    font-size: 16px;
    font-weight: bold;
    line-height: 27px;
    color: #000000;
}
 
.sidebar ul ul li, .obar ul ul li{
    margin: 0;
    padding: 6px 0 3px;
    background: #EFEFEF;
 
.sidebar ul ul ul, .obar ul ul ul{ padding: 3px 0 0; }
 
.sidebar ul ul ul li, .obar ul ul ul li{
    padding: 6px 0px 3px 15px;
    background: url(images/bg_arrow_right.gif) no-repeat 0px 8px;
}
 
.sidebar ul ul ul ul li, .obar ul ul ul li{
    background: url(images/bg_arrow_right_2.gif) no-repeat 0px 8px;
}
 
/* COMMENTS TEMPLATE */
 
.post h3#comments, .post h3#respond{
    padding: 0 0 2px 19px;
    line-height: 27px;
    background: url(images/user_comment.gif) no-repeat 0 6px;
    color: #e45b00;
}
 
.post h3#respond{
    background: url(images/add_comment.gif) no-repeat 0 6px;
    color: #333;
}
 
ol.commentlist{
    margin: 0 0 11px;
    padding:0;
    list-style: none;
}
 
ol.commentlist li{
    padding: 13px 0;
    background: url(images/bg_comment_bottom.gif) no-repeat left bottom;
}
 
ol.commentlist li .commentmetadata{
    font-size: 11px;
    color: #546477;
}
 
ol.commentlist li .commentmetadata a{
    color: #546477;
}
 
form#commentform small{
    font-size: 11px;
} 

I think a little something extra is needed to be added in the sidebar section.Please help me.Thanks in advance

[jfulton]

You would think it'd be very simple, but this type of thing is one of the most difficult to learn and get around. Based on your site, it appears that the easiest way would for you to modify the background image of the main content area to have the grey background on the sides a la faux columns.

If that doesn't help, try googling or checking some of the links at alistapart, or check out one true layout.

HTH

[TwoD]

I think I'd arrange it so that you have something like:

• Wrapper - Centers the page.
  • Header - Holds the upper part of the page, upper-rounded corners as bg.
    • Header content - Holds whatever you want to place in here
    • Clearing div (if you floated what's in the header) - Has the lower rounded corners as bg. Might also set margins to the "main content" of the page.
  • Content - Sets the background color you want for the Sidebars.
    • Left sidebar - floated left etc.
    • Page - floated left, has the background color you want for the page etc.
    • Right sidebar - floated left etc.
    • Invisible clearing div - Makes sure the Content div stretches all the way down.
  • Footer - Clearing div, makes sure the Wrapper stretches all the way down.
    • Bottom image

Of course, things are missing here. You might need to add more layers of divs to get the border effect etc, unless that's possible to do with the actual border settings, but that might mess up the rounded-corner images.
Note that the actual sidebar divs won't stretch all the way down. That's not possible unless you fill them with whitespaces (or other content) or set a fixed height. Netither is very flexible. There's also the huge-margin-hacks used in One True Layout, but I don't like that approach myself.
You'll just make it look like they stretch all the way since the Content div is the one setting their background color.

There's one thing to note tho. If the Page div becomes smaller than the sidebars, You'll get the sidebar-background below that div. To fix that, you could use the min-height property.
It doesn't work good in all browsers, but here's a useful trick which won't break anything.

height: 400px;
height: auto !important;
min-height: 400px; 

I used that a lot on www.sofe.se to get the columns to never go below a certain height. It's not as noticeable now tho as they've added more content. But before that, you could get odd things like correct background color (the div stretched far enough) but the border around it only stretched as far as the content reached.
Anyway, I'm sure I missed some important stuff since I typed this out a bit too fast, but I hope it was atleast a bit useful