How do I change the width of my sidebars?

[vbrasil]

I want to change the width of my sidebar widget areas. I tried to change it in the styles.css folder and what occurs is the left side bar goes down. I am assuming because there is not enough width in the frame. I need to increase the size of the left sidebar 40px. I can reduce the right sidebar by the equivalent.  If I do reduce the right by the equivalent, I have pages on the site that use only the right sidebar and that may through off the main content section. So I need to change that as well, or if possible I can change it for this one page that uses both right and left content bars.

 

Please help

[Brislon]

I'm trying to do the same - but can't find any information on how. Did you find the answer?

Tim

[Susan]

If you wish to change the width of your sidebar, you need to change the width of other elements of your stylesheet as well.

This mark-up guide should assist you in determing what to look for in your stylesheet to adjust:

http://my.studiopress.com/docs/visual-markup-guide/

[afmastro]

Thanks for the visual markup guide. That was very helpful.

I used this guide to change the column side bar and column widths, and I had an unintended consequence.

I'm using the Bee Crafty Theme, and the sidebar / content / sidebar layout.

I want #sidebar-alt and #sidebar to be 235 px each and #content to be 470px. Basically, I want the content to take up 1/2 the #inner area and each sidebar to take up 1/4 of the #inner area.

I seem to have achieved that, except now the right-hand sidebar (#sidebar) is hanging out at the bottom of the screen.

If you want to see, it is at http://upswingbabynames.com

I think I need to change one of the float rules from right to left or left to right, but I'm not sure which one since my CSS is very rusty, as you can probably tell. Please excuse all of the CSS, but here is what I did.

I would really appreciate it if some could lead me in the right direction. Thanks!

------------------------------------------------------------------------------------------------------------------------

[The #inner rules/settings stayed the same]

/***** Content-Sidebar Wrapper ********************/

#content-sidebar-wrap {
float: left;
width: 705px;
margin: 0;
padding: 0;
}

.sidebar-content #content-sidebar-wrap, .content-sidebar #content-sidebar-wrap {
width: 940px;
}

.sidebar-sidebar-content #content-sidebar-wrap, .sidebar-content-sidebar #content-sidebar-wrap {
float: right;
}

/***** Content ********************/

#content {
float: left;
width: 470px;
margin: 0;
padding: 0 5px;
}

.sidebar-content #content, .sidebar-sidebar-content #content {
float: right;
margin: 0;
}

.sidebar-content #content, .content-sidebar #content {
width: 624px;
margin: 0;
}

.sidebar-sidebar-content #content {
float: right;
width: 475px;
margin: 0;
padding: 0;
}

.sidebar-content-sidebar #content {
width: 475px;
margin: 0;
padding: 0;
float: left;
}

.full-width-content #content {
width: 920px;
margin: 0;
}

[I left the rest of the #content rules/settings unchanged]

/***** Sidebar & Sidebar-Alt ********************/

#sidebar {
width: 235px;
float: right;
display: inline;
font-size: 13px;
line-height: 22px;
margin: 0;
padding: 0;
}

#sidebar-alt {
width: 235px;
float: left;
display: inline;
font-size: 11px;
margin: 0;
padding: 0;
}

.sidebar-content #sidebar, .sidebar-sidebar-content #sidebar {
float: left;
}

.content-sidebar-sidebar #sidebar-alt {
float: right;
width: 210px;
}

.sidebar-sidebar-content #sidebar-alt, .sidebar-content-sidebar #sidebar-alt {
float: left;
width: 210px;
}

#sidebar .widget, #sidebar-alt .widget {
margin: 0 0 15px 0;
padding: 0 0 10px 0;
}

 

[I left the rest of the #sidebar and #sidebar-alt rules/settings unchanged]

 

[Author]

Posts