S
Sar-Bear
Guest
Html - how do I make my left hand and center columns have the same background as my right hand column?
So I have my blog template here -- I was able to modify it from a 2-column blog to a 3-column blog. The problem is now my left-hand and center columns don't have the same background as my right hand column. Can someone please help me with the code? I've been playing around with it to no avail! Thank you : )
Here's the code I think you should need:
1. I changed this: #sidebar-wrapper {
width: 220px;
float: right;
padding: 5px;
border:1px solid $bordercolor;
background-color:#250c2f;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
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 */
}
to this:
#sidebar-wrapper {
width: 220px;
float: right;
padding: 5px;
border:1px solid $bordercolor;
background-color:#250c2f;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
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 */
}
#left-sidebar-wrapper { width: 220px; float: left; 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 */ }
2. I changed this: <div id='main-wrapper'>
to this: <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>
<div id='main-wrapper'>
3. I changed this: #outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
to this: #outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
4. I changed: #main-wrapper {
width: 410px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#250c2f;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
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 */
}
to this: #main-wrapper { width: 410px; float: left; margin-left: 20px; 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 */ }
My right-hand column has a semi-transparent box for it, but my left-hand and center columns don't have any box. I want them to look like my right-hand column. Sorry if I was unclear.
So I have my blog template here -- I was able to modify it from a 2-column blog to a 3-column blog. The problem is now my left-hand and center columns don't have the same background as my right hand column. Can someone please help me with the code? I've been playing around with it to no avail! Thank you : )
Here's the code I think you should need:
1. I changed this: #sidebar-wrapper {
width: 220px;
float: right;
padding: 5px;
border:1px solid $bordercolor;
background-color:#250c2f;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
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 */
}
to this:
#sidebar-wrapper {
width: 220px;
float: right;
padding: 5px;
border:1px solid $bordercolor;
background-color:#250c2f;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
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 */
}
#left-sidebar-wrapper { width: 220px; float: left; 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 */ }
2. I changed this: <div id='main-wrapper'>
to this: <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>
<div id='main-wrapper'>
3. I changed this: #outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
to this: #outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
4. I changed: #main-wrapper {
width: 410px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#250c2f;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
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 */
}
to this: #main-wrapper { width: 410px; float: left; margin-left: 20px; 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 */ }
My right-hand column has a semi-transparent box for it, but my left-hand and center columns don't have any box. I want them to look like my right-hand column. Sorry if I was unclear.