CSS image repeat issue
Basically, I have a DIV with my page content in, and want it to have a shadow on the right.
I have a rounded cornered image above the content DIV (also one at the bottom)
I tried wrapping the rounded cornered images and the content DIV all in a separate DIV with float: left to try to then float my shadow DIV next to it.
This works fine in most cases of float, but problem is I need it to push the shadow image the height of the content to use the background-repeat: repeat-y;. Content is also dynamic, so height varies.
So I tried using another wrapper DIV around the lot (content, images and shadow), so the content DIV pushes the wrapper DIV height, and thus also pushing the shadow DIV as it's inside the wrapper DIV, but of course, no!
I've tried height:100% on containers etc, just can't get this to work.
Here's an example of the structure of my layout.
CSS is in the head so you can see all the code in source.
decibel.places posted this at 00:01 — 7th March 2009.
He has: 1,494 posts
Joined: Jun 2008
hey greg,
it meant positioning the shadow div differently, but the attached file works in IE, Firefox and Opera
decibel.places posted this at 00:37 — 7th March 2009.
He has: 1,494 posts
Joined: Jun 2008
I reread your specs and you asked
so here is another example that *pretty much* does that
webwiz posted this at 00:55 — 7th March 2009.
He has: 629 posts
Joined: May 2007
While you were working on that, db, here's another possible solution I came up with: http://webwiz.robinshosting.com/temp/shadow/
(Comments in the source.)
Try increasing text size to see how it stretches. Hope it helps.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
decibel.places posted this at 05:01 — 7th March 2009.
He has: 1,494 posts
Joined: Jun 2008
@webwiz,
Your solution is essentially the same approach, enclosing the content within the shadow div and adding some padding etc.
I daresay your css is a bit more convoluted (maybe because you preserved the original code Xed out) but I don't like using hacks like *overflow. Also you set a fixed width for the shadow div, perhaps that does not matter, unless the content width changes
You also replicated my first version, but I believe greg wanted the shadow to expand along with the content div, ie my second version - it's hard to tell just how the shadow will fit in to the layout from the mockup.
greg posted this at 11:46 — 7th March 2009.
He has: 1,581 posts
Joined: Nov 2005
Ahh thanks!
This has been a pain for hours now. Really appreciate that ... you know when something has you by the whatsits and you just can't get it resolved.
I did try to wrap the content with the shadow, but I think I had that many code changes everywhere, I lost the simplicity requirement.
(there are absolute positions and various other DIVs in my real code)
I've attached an image of it how it looks in final. It's obviously only part of the site, and looks better with real content as the yellow content area overlaps the footer with the lower shadow.
(and of course the image is scaled for upload here so has nasty corners/graphics a bit)
Cheers
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.