4 replies [Last post]
mikeusru
Offline
newbie
Last seen: 15 years 8 weeks ago
Joined: 2007-11-27
Posts: 10
Points: 0

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:

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

mikeusru
Offline
newbie
Last seen: 15 years 8 weeks ago
Joined: 2007-11-27
Posts: 10
Points: 0

Thanks Chris, I'll give it a

Thanks Chris,
I'll give it a try, will let you know if it helps.

mikeusru
Offline
newbie
Last seen: 15 years 8 weeks ago
Joined: 2007-11-27
Posts: 10
Points: 0

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.

mikeusru
Offline
newbie
Last seen: 15 years 8 weeks ago
Joined: 2007-11-27
Posts: 10
Points: 0

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.