How to make sidebar and main body the same background/length

Most of my site is full width. I have a few pages that use a right sidebar. In order to make the main body and sidebar appear to have the same background height I had the site's background have color on either side and white in the middle with a repeat.

In certain browsers it is not lining up correctly. My preference would be to have the sidebar and main body line up no matter how long the text would be on either side (short sidebar vs long main body or long sidebar vs short main body).

Does anyone know how to do this? It's driving me crazy

the site is


View Replies:
Steevb replied on at Permalink Reply
Don't use images, use colour.

For example:

body {background:#66CC66}

content {background:#FFF}

globalnerds replied on at Permalink Reply 1 Attachment
That would be my preference, however if the sidebar content is shorter in length than the main body, the sidebar area then the two boxes do not line up.

I have attached a screen shot (note the yellow is not the background of this site) to show you what I mean.
JohntheFish replied on at Permalink Reply
globalnerds replied on at Permalink Reply
That is really cool, but I am not sure how to implement that in c5. My design is based around the plain yogurt theme. Any ideas?
PauloCarvalhoDesign replied on at Permalink Reply
you can just adjust height with jquery by first getting the height you want with something like var myheight = $('#yourdiv').height(); and $('#yourtarget').css('height':myheight);
Or something similar!
JohntheFish replied on at Permalink Reply
If you want it on every page, then I would override the theme with a modified theme (look for the howtos on: how to override anything; customise a theme).

You would need to
- Upload the equal height jquery addon to the /js folder.
- Modify the theme page layouts with a class '.make_these_equal' applied to the div elements of the main and sidebar areas, that you could then use to identify them later.
- Modify the theme header to load jquery and the equal height addon.
- Add some javascript to the theme footer to set the equal height.
Steevb replied on at Permalink Reply
Sorry John,

Why use javascript when you can use css?

Couple of mods to styles and your done!

As per my attachment...
JohntheFish replied on at Permalink Reply
Unless I am missing something about the css, I think it depends on how literally you take the requirement. Whether you want them to look like they are the same height (css) or actually be the same height (javascript).
Steevb replied on at Permalink Reply 1 Attachment
Did you try what I suggested?

body {/* customize_background */ background-color: #66CC66; /* customize_background */ padding: 0px; margin: 0px; }

#page{background:#FFF; width:800px; margin:auto; text-align:left;padding:20px }

#page #central #sidebar{background:#EEE; float:right; width:23%; overflow:hidden;padding:10px }

See attached
PPPills replied on at Permalink Reply
55 websdesign

your method worked, but for some reason it didn't take until I did an edit to something else on the css and then changed it back.

It's perfect.
Thank you!!
jordanlev replied on at Permalink Reply
This is one of the most annoying things about CSS -- there is no way to make two elements size up vertically like you'd want in a sidebar (except by using tables for layout, but you probably don't want to do that). The best solution I've come across is called "faux columns", where you make a background image that has the two colors and a dividing line in the proper spot, then repeat it vertically down the whole page. Google for "CSS faux columns" for a ton of information on how to accomplish this.
cbjose28 replied on at Permalink Reply
I found another fix for the sidebar and content. If you only want to divide these elements by adding a "line" as a separator, this worked for me:

#content {
width: 665px;
float: left;
padding-right: 20px;
border-color: #b8b7b7;
border-right-style: solid;
border-right-width: 1px;
height: 100%;

#sidebar {
width: 190px;
margin: 0 0 0 -1px;
float: left;
padding-left: 10px;
border-color: #b8b7b7;
border-left-style: solid;
border-left-width: 1px;
height: 100%;

I'm using a right sidebar in this case. What I had to do was to make the line overlap, which is why I've entered a margin of -1px on the left side of the sidebar.

I'm very new to all this, but thought I'd share this anyway since I was looking for something like this!