Don't use images, use colour.

For example:

body {background:#66CC66}

content {background:#FFF}

sidebar{background:#FFF}

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.

You could use

http://www.jainaewen.com/files/javascript/jquery/equal-height-colum...

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?

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!

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.

Sorry John,

Why use javascript when you can use css?

Couple of mods to styles and your done!

As per my attachment...

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).

Did you try what I suggested?







See attached

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!!
K

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.

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!