[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