Stian,
For the div #mainContainer, set the height to auto.
For the div #mainContainer-middle, set the height to 550px.
That should fix your layout issues.
Adam
2010-09-02 17:12:35
A:
Thank you for the response. But, alas, your suggestion doesn't solve the issue. The div still doesn't change size depending on how much content there is, so if there is a lot of text it will still appear outside the div. :(
Stian
2010-09-02 17:20:42
+1
A:
You have given html and body a height of 100%. (Many child divs also have height:100%.) What this means is that they are 100% of the size of the viewport, not the content. IOW, they are limited by the height of the browser window, and any content that stretches below this will be outside of any backgrounds applied.
Edit: To further elaborate, you have set up the background images (drop shadows) on the left and right on empty divs that you tried to stretch using height:100%, but since they do not contain anything, they can only be the height of the parent elements, which are themselves the height of the veiwport. When you set the html and body (or any other intermediate element) to height:auto, these divs (mainContainer-middle-left and -right) collapse to the size of their content, which is nothing.
You should probably reconfigure the html so these elements are parents of the actual content and get rid of all "height:100%" statements. They don't mean what you think they mean!
Doug
2010-09-02 17:51:11
Your explanation makes sense! I have always been told that you need to set html and body to 100% to be able to set heights on divs. Does this only apply when you want to set the height to a spesific number of pixels? Anyway, how do I make the drop shadow divs extend height-wise without using height:100% ?
Stian
2010-09-02 18:05:11
Maybe, instead of having two different divs that has the left and right drop shadows, I could have one picture that is as wide as necessary, and just use that as the background on the whole middle part. Just thinking out loud :P
Stian
2010-09-02 18:09:08
Any div can have a pixel height set, but to set percentage heights on divs, the parent elements have to have some sort of height set as well. If you think about it, setting a height to say 50% prompts the question "50% of what?" If it's only percentages all the way up (to body/html), then the browser answers the question with "50% of the viewport".
Doug
2010-09-02 18:23:13
To make the drop-shadow divs grow vertically, simply nest the content inside them (and then fool around with background positions and left and right margins). But yes, getting rid of them altogether and creating a single image with left and right shadows and white (or transparent) in the middle is the preferred way of doing this.
Doug
2010-09-02 18:23:52
All right, thank you very much for you answers! Hopefully I'll get this sorted. :)
Stian
2010-09-02 19:20:13