Member Avatar for 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.

Edited by tusharbhatia because: n/a
  • 2 Contributors
  • 1 Reply
  • 242 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by suhaildawood
Member Avatar for 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/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.