Floated divs: Can you drop shadow them?

Im creating a website that has three columns of content.....

1. navigation float: left;
2. main content centered
3. right column float: r开发者_如何学运维ight;

Is it possible to drop shadow all three of these areas.

I tried and it didn't work wondering if the divs prohibit the end result?

There are various ways of doing background shadows

1) To give background url as drop shadow image for the div and give some margin-left:5px which makes show like a drop shadow.

2) to get four images like topright , right ,bottomright,bottom image and position them one by one after the divs.

choose whatever is easy for you and it should work perfect. See the below linke for some exampel http://www.alistapart.com/articles/cssdropshadows/

we implemented drop shadows at the following location for images

http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=E1E1ADDF1A034D5D9A89DB0A8E318263

with firebug you can see how we implemented , its the second approach.

let me know if you have more questoins.

Of course you can apply drop-shadow to all of these at the same time, one solution if your ok with the browser support listed here http://caniuse.com/css-boxshadow is to simple just use CSS3 box shadow.

just simple target all three selectors of your containers like so.

.container-left, .container-middle, .container-right { }

then apply box shadow like so (dont forget browser prefixes) and I'm using RGBA so we get to set the Alpha transparency as well, but you could use HSLA also.

.container-left, .container-middle, .container-right {
    -webkit-box-shadow: 0 0 9px rgba(20, 0, 0, 0.53);
    -moz-box-shadow:    0 0 9px rgba(20, 0, 0, 0.53);
    box-shadow:         0 0 9px rgba(20, 0, 0, 0.53);
}

Hope this was helpful.