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/articles/2008/02/12/test/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 (http://killersites.com/videoTutorials/Tutorial_WebDesign2/matching_divs.html) is all I could find on the JS solution, and I don't know how good it is, because my soundcard is shot (http://dynamicdrive.com/forums/showthread.php?p=130202#post130202).

[BLiZZaRD]

same concept as this tutorial (http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) 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? :p

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/articles/2008/02/13/test/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">

[lindsaycb]

Well, like I said, it works in IE when I load it from my desktop. But when I upload it to my website, that's when it doesn't work. Which is why I find it odd. So I added in the conditional statements and still doesn't work on website but does from my desktop.

I added the media=screen and that didn't do anything either.

And here I was so close to having the entire page CSS. Maybe I should just go with the table thing.

[BLiZZaRD]

Do you have a link to the uploaded one? Perhaps there is something to be seen there.

[lindsaycb]

Here it is:
http://www.daily-chronicle.com/articles/2008/02/13/test/news02.txt

I also sent you via email the HTML file so you can open it up on your desktop and see the difference.

[BLiZZaRD]

So may I ask why you are using the .txt extension on HTML pages?

[lindsaycb]

It's a CMS platform. We upload .txt files and it converts them to work with the HTML templates I upload. That's why I sent you via email the HTML template itself. :-)

[lindsaycb]

I got it working! Thanks for willing to look at it!!

[Jas]

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

I see your point now. Sorry :(

However, this stratagy seems to have some problems with some browsers, Safari especially (at least when I tried to do something like it with my site, some browsers would not cooperate completely) I got it to work in IE, NS, and FF, but I think Opera was the other one that would not work. I think javascript is more trusted, but CSS is always better when it works. Let me know if it does work in Safari and Opera, and if so, how you did it :)

[BLiZZaRD]

I have used this many many times and for different applications (such as the problem here) and it worked perfectly in Fx IE Safari (even Safari for Iphone and Ipod Touch) and Opera.

Could be the extras you coded with it?? I don't know.

[Jas]

Hmm. That could be the case-- but I can't imagine what would be conflicting. I will review the tutorial and see if I can't make it work for me as well, then. I did have another problem with my CSS in safari, and it might be related come to think of it.