Correct way to put a shadow on main content.

[fischermx]

I've seen fixed width websites which has a nice shadow on left/right sides of the content. That look nice, but most of them use a technique in which they create a big wide thin image that has already painted the background and the border(either shadows or whatever). I found that ugly and I thought it could be another way. I could not find examples to do this, so I made up this.

I created a div to hold the left shadow, then inside, other div to hold the right shadow, then inside, another div to be the real main container.

<div id="left">
<div id="right">
<div id="main">
</div>
</div>
</div>


Look at this example: http://fischermx.bravehost.com/Template.htm.
Works fine in both IE and FF.

Now that I made it, I still thinking if I didn't this more complated that it needed to be. Is there any other way to achieve this ?

[KDLA]

That's how I would do it. This way, if the area expands, you still have the shadow.
Great work! :)

[Kravvitz]

I've done it that way before. :)

I recommend you have a max width of 760px if you're using fixed width though. It loaded up with a horizontal scrollbar for me, which is bad.

I suggest you read these:
The importance of window-width (http://www.collylogic.com/?/comments/the-importance-of-browser-window-width/)
Senior citizens tend to prefer 800x600 to 1024x768. (http://www.sitepoint.com/article/improve-usability-older-users/)
Scrolling and Scrollbars (http://www.useit.com/alertbox/20050711.html)
Comments on Scrolling and Scrollbars (http://www.456bereastreet.com/archive/200508/scrolling_and_scrollbars/)

[fischermx]

Thanks for your commments.

I've done it that way before. :)
I recommend you have a max width of 760px if you're using fixed width though.

The original site is designed to 1024x768. It is a geek oriented site, I could not think a geek having less than that these days.

I've done it that way before. :)
It loaded up with a horizontal scrollbar for me, which is bad.

Now, I'm surprised. :confused:

[fischermx]

Do you know why FF left something like a 10pixels margin on top ?
It is not very noticeable in the sample because the bravenet's adds, but if you look carefully you'll see it.
I don't remember/know how to take ride of it....

[Kravvitz]

1) My screen res. is 1024x768 but my browser window is only about 940px wide.

I suggest you don't specify a width on it, at least in browsers that support min-width.

2) You're experiencing collapsing margins. (http://www.dynamicsitesolutions.com/css/layout_techniques/#collapsing_margins)