Tue, 2007-11-27 14:48
Hello all,
So I just scrapped my whole table layout and am building a CSS website from scratch. I've run into this one problem that I just can't figure out how to solve.
For the edges of the page I created a shadow that falls into the background. This shadow is an image which I am trying to set as the background for the top, bottom, left, and right edges. The top and bottom are no problem since they are all of a fixed size. The left and right, on the other hand, have to be able to change height depending on how much content is inside the main "content" div. I'm trying to make the left and right edges completely fill in the space given for them. The problem is that the parent div of the left and right edges has an "auto" height, and setting the edges to "100%" height (at absolute position) stretches them out to the height of the page, and not setting a height makes them disappear completely since there is no content but a background. I'm sorry if this has been asked before but I searched everywhere and couldn't find an answer.
Thanks,
mikeusru :shrug:
Tue, 2007-11-27 18:12
#1
The simplest way is just to
The simplest way is just to create a nest of divs to give you enough elements for your background shadows.
e.g.
... your page content ..
Now you have four full size elements to put your shadows on.
Tue, 2007-11-27 18:35
#2
Thanks Chris, I'll give it a
Thanks Chris,
I'll give it a try, will let you know if it helps.
Tue, 2007-11-27 19:15
#3
The thing is I'm pretty sure
The thing is I'm pretty sure it's all already nested in there, just with IDs and not classes. here's a basic image of the layout:
The red bars have no content inside them except for a background. Each is designated to float left or right. That image is how I want it to look, anyway, since right now, the red bars don't stretch out like I want them to. Also, this page is not meant to fit the user's screen, but has a defined width and the height depends upon the content in the purple area.
Wed, 2007-11-28 00:37
#4
I solved my problem by
I solved my problem by completely rethinking the way I was using the images/shadows. Used http://www.freecsstemplates.org/ as a reference.