how can I make this right bar bg go all the way down the page?

The background of this sidebar is not going all the way down the page. I have tried height: 100% and nothing. Anyone ever have this problem, how can I fix it. Here is the link:http://www.mdoneonone.com

Thanks

PS: how do you like my site design.

What you want is for the two columns to match heights, as cells in a <table> would. Unfortunately, since <div>s don't use the same rendering rules as <table> cells, you have to hack it.

The most popular hack is faux columns, and this is probably the best choice for you. Personally I don't like it, because I prefer elastic layouts, and faux columns won't work when your columns change widths.

The correct solution would be to set the <div>s to display: table-cell; using CSS. This will make them render exactly as though they were cells in a <table>, so equal heights are automatic.

But Internet Explorer (IE) does not support this incredibly useful, standard CSS display type. I use javascript to fix IE's bad rendering.

wrap the whole thing in a div and set the background of that dive to the color you want so say

<div id="contentwrapper">
<div id="left">content for left</div>
<div id="right">content for right</div>
</div>

content wrapper and right would have the same background colors and left would be the other color.

you will also need to add a clear both fixing div

need any further help let me know.

That's a good, simple solution; but it will only work if the left column is always longer than the right.

I tried that its not working? What did I do wrong? Here is my css:

Code: Select all

#contentandbar {
    background-color: #FFD8A5;
    clear:both;
}

Mike, you really shouldn't be using JavaScript for presentation. JS should be for behaviour only. I refuse point blank to blur the lines. There are three common layers that make up a page or document. Structure/content, presentation and behaviour and I am very strict about keeping them separate.

Pete.

Do you have a link? You didn't post enough of you code to know what you did wrong.

I put the link in my first post: http://www.mdoneonone.com

My apologies.. I didn't see the link.

Cullinanweb wanted you to put both the left and right columns in a wrapper div.

You do not currently have those columns in a wrapper.

Faux columns is the only way I know how to do this.
You make a background image that will repeat-y. Apply it as the background to the wrapper div.

Then you nest the left and right columns in the wrapper- No colored backgrounds on the left or right.

Without faux columns you will never get the two columns to appear to match in length.

How would I go about using the faux columns? Where should I put the bg code?

Either in the body { } or in a #wrapper div.

Click the link MikeHopley gave you at the beginning ... it should explain it there. Or do a google search for Faux Columns ... you should get A LOT of results

Take a look at this tutorial it will explain it all!

Hmmm yes ... that's the link I was talking about

Why, unless out of sheer religious zeal?

(X)HTML, CSS, and javascript are tools. Their purpose is to enable you to make accessible, interoperable, attractive, usable websites. They are not religious objects.

The separation of style, content, and behaviour makes for easier coding, with less maintenance; it's more logical and organised. It also makes pages smaller in file size. That's all it does.

Besides, how do you define behavior? Response to a user's actions? Then CSS link hover states should be handled by javascript! The partition is not quite as neat as you might think. You are perhaps suffering from "ontologist's delight" -- a wilful state of delighting in artificially perfect taxonomy.

CSS is good at some things; javascript is good at others. For the most part, the boundaries are quite clear. But there are areas of significant overlap.

In this particular case, I don't like using javascript. It's not as elegant. But I see no problem using a javascript work-around for IE, which fails to support such a basic part of the CSS standard. If javascript is off, then IE users just get a slightly inferior page presentation. So what?

Here's another example: to make rounded corners, we need extra markup. Okay, so this should be done in CSS; but CSS 3 is a long way off. But extra markup is annoying for me when I'm editing, so I use javascript to generate the extra presentational <div>s.

What you ask is nigh-on impossible. If you completely separated style and content, for example, then you would never use a single <div> in your markup (because its only possible purpose is as a presentational or behavioural hook). Your lines are already blurred; you just can't see it!

In case anyone is interested, here's where I got my method from:

http://www.projectseven.com/tutorial...umns/index.htm

I think I edited their javascript to remove some strict errors; if you want my version, just ask.

Come now, Mike, you should know what I am like by now. Almost everything I do is on principle rather than for any practical reason. It all works, I just make my life extremely difficult. I think I am simply a glutton for punishment and one of those unrelenting purists.


Pete.

Ha!

My point is that your principles may not be quite as principled as you think. If your idealism doesn't quite hold up to philosophical scrutiny, then why not give it up? It would make life easier.

Then again, maybe you're the addictive, immoderate type who would go on a blinding binge as soon as he relaxed the self-imposed strictures. One day, you're using javascript for an IE presentation hack; the next, you're back to tables and tag soup.

They do say a little alcohol is good for your health, but not, perhaps, if you're a reformed alcoholic.