You'll see the problem immediately - the sidebar won't stretch to fit. I'm still learning CSS, but it was my understanding that if you gave the document a height of 100%, and that you could give individual divs a height of 100% and they would interpret that percentage based on the height of the entire document ... I guess I'm wrong about that.
Can someone give a clear solution to this? I run into this issue frequently and it seems fixing it is always a hack-job.
If you want to apply a style to the entire html don't do it like this.
html { style }
/* The correct one is */
* { style }
Your problem is that you have applied height: 100% to all divisions, why? And also, why do you position: relative all your divisions?
If you want your sidebar 100% of users screen do it like this.
body { height: 100% }
#sidebar { height: 100%; }
I tried to apply it straight to your code, the bad news is that it's messing the whole site, you will see if you try it. The good news is that it's working and it's stretching the sidebar to the whole height of the screen.
Hey guys. Eric, at first your comment pissed me off. Then I realized it pissed me off because you were right, the code was bad. I'm new to CSS (only a few months) and I don't know everything just yet, and probably wont for years ... sometimes I forget that when faced with negative criticism.
Have a look at it now, I think this is much better. I'd be interested in your take on relative positioning, I use it in nearly every single div ...is that a bad thing?
As an answer to this 100% height thing, I've found that it's easier to simulate it ... in my case, I wrapped the content div and the sidebar div in a container and gave the container a repeating background that creates a faux sidebar of sorts. Maybe it's cheating, but hey, it worked. :)
You'll see the problem immediately - the sidebar won't stretch to fit. I'm still learning CSS, but it was my understanding that if you gave the document a height of 100%, and that you could give individual divs a height of 100% and they would interpret that percentage based on the height of the entire document ... I guess I'm wrong about that.
Can someone give a clear solution to this? I run into this issue frequently and it seems fixing it is always a hack-job.
:) thanks!!!
Dan
If you want to apply a style to the entire html don't do it like this.
Your problem is that you have applied height: 100% to all divisions, why? And also, why do you position: relative all your divisions?
If you want your sidebar 100% of users screen do it like this.
I tried to apply it straight to your code, the bad news is that it's messing the whole site, you will see if you try it. The good news is that it's working and it's stretching the sidebar to the whole height of the screen.
I think your code is bad, you should rewrite it.
Here's an example.
http://www.webmasterworld.com/forum83/200.htm
Have a look at it now, I think this is much better. I'd be interested in your take on relative positioning, I use it in nearly every single div ...is that a bad thing?
http://designucation.com/LMHQ
As an answer to this 100% height thing, I've found that it's easier to simulate it ... in my case, I wrapped the content div and the sidebar div in a container and gave the container a repeating background that creates a faux sidebar of sorts. Maybe it's cheating, but hey, it worked. :)