height:100%

[lindsaycb]

I have a main content div. Within that div, is a story div and then a sidebar div, they are side-by-side.

The story is all text. The sidebar div is a gray background that I want to stretch down to the bottom of the page. So I use height:100% but it won't go lower than the content that between the open & close tags.

I don't want to use a specific pixel height for the story will vary in length, so I say 1000px and the story is just an update, there'll be a lot of white space at the bottom.

Why won't the height:100% work? How can I alleviate this problem?

Here is what I'm working with: http://www.daily-chronicle.com/artic...est/news02.txt

[Jas]

CSS doesn't really do that reliably, to my knowledge (at best, I think it extends to the height of the window), so there are two other ways to do this-- a "right" way and a "wrong" way.

First, the wrong way. Put the layout into a table with two columns. As the contents grow longer, the entire table stretches. It's very simple, but frowned upon by webdesigners.

The second, "correct" way is to use JavaScript to calculate the correct px height for you. Sorry, but this is all I could find on the JS solution, and I don't know how good it is, because my soundcard is shot.

[BLiZZaRD]

same concept as this tutorial You will use the same CSS and everything.

[Jas]

Er, I don't see the relevance, Blizzard. I thought we were talking about stretching an element, not positioning it at the end of the page. (Your tutorial positions something of a known height at the absolute bottom of the page.)

[BLiZZaRD]

Yes, but the tutorial explains how to force the footer to the bottom no matter how much text or items are in the body. Same concept, we want the body to stretch the full length of the page, in this case the sidebar would be the body of the tutorial.

Using the CSS as shown obviously won't do much, the OP would have to tweak it to fit the div IDs and such, but the rules are the same. The height of the footer doesn't matter (being known, or even non-existent) it's the way we push it there that is relevant to this post.

[lindsaycb]

Yes, but the tutorial explains how to force the footer to the bottom no matter how much text or items are in the body. Same concept, we want the body to stretch the full length of the page, in this case the sidebar would be the body of the tutorial.

Using the CSS as shown obviously won't do much, the OP would have to tweak it to fit the div IDs and such, but the rules are the same. The height of the footer doesn't matter (being known, or even non-existent) it's the way we push it there that is relevant to this post.

See, I saw this tutorial in another post that you replied to but I didn't see how this would work for my situation. But since you are thinking it will, I will read it again and hopefully get it to work. I'll respond if I have any questions!

Thanks.

[lindsaycb]

Got it to work! Thanks much!

[BLiZZaRD]

See?

Methods are usually always the same for languages (did I dare call CSS a language? :O ) it's the application of said methods that matters.

[lindsaycb]

Well, it's working fine in Firefox no problem. When I load in IE from my desktop it works too. But when I upload it to my site, it doesn't work in IE any longer.

http://www.daily-chronicle.com/artic...est/news02.txt
If I could attach my file, I would. But when I load that exact same HTML page from my desktop in IE 7, it does work. How odd...

[BLiZZaRD]

Well, with any cross-browser element we have to account for degrading purposes, or faulty code (forget to close a statement, or something, for example)

Also, for IE and this to get along you need to use the conditionals. Not my favorites of choice, but it works:

Older versions of Internet Explorer don't understand the min-height property but lucky for us the normal height property behaves exactly the same way in these old Microsoft browsers, that is, it will stretch to 100% height of the viewport but if the content is longer it will stretch even further. We simply expose this 100% height rule to Internet Explorer only by using IE conditional comments. View the source on the demo to see how this is done.

also try adding media="screen" in your CSS call..

link rel="stylesheet" href="http://www.daily-chronicle.com/art/gray.css" type="text/css" media="screen">