CSS Inner Shadow on Three Divs Side by Side

[tusharbhatia]

Hi,

Here is a link to my side by side div's: http://jsfiddle.net/cMpaE/

Or you can view my code below (it's the same for both, but if you go to the above link you can see a preview)

<div id="logoBlock" style="float:left; background-color:#CF6; width:15%; min-height:120px; border-top-left-radius:5px; border-bottom-left-radius:5px; margin-bottom:2%;"> 
    <center>  
    logoBlock
    </center>
    </div>
    
    <div id="promotionBlock" style="float:left; background-color:#FFE6E7; width:15%; min-height:120px; margin-bottom:2%;"> 
   promotionBlock
    </div>
    
    <div id="descriptionBlock" style="float:left; background-color:#CCD9F7; width:60%; min-height:120px; max-height:120px; overflow:hidden; border-top-right-radius:5px; border-bottom-right-radius:5px; margin-bottom:2%;"> 
    descriptionBlock
    </div>

I would like to make them have an inner shadow with "box-shadow:inset" however this creates the inner shadow for each div. I would like the inner shadow to look like its only one div.

Can someone help me do this? I'm finding this pretty hard, thanks so much for your time.

[suhaildawood]

CSS box-shadow has a lot of features, and I was looking into it the other day. This website: http://www.css3.info/preview/box-shadow/ shows how you can edit the values to customize the shadow. I tried working on the link that you gave me and I was able to make the shadow for the top and sides, but not the bottom. The values are combined for directions. It is hard to explain but one value can be 5px or -5px (e.g. 5px for top and -5px for bottom) but they cannot be both. Here is what I got out of it: http://jsfiddle.net/z9mEE/