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
  • 263 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by suhaildawood

Dani AI

Generated

wanted a single continuous inner shadow across three side-by-side panels. Applying box-shadow: inset to each child produces three separate shadows, which is exactly what was seen. ’s point about single-direction offsets is useful — you can’t get “both directions” from one inset value alone — but there are two practical fixes: draw the inner shadow on a single parent, or layer multiple inset shadows.

The easiest, most robust approach is to wrap the three columns in a parent and render the inner shadow from that parent (using a pseudo-element so the shadow sits above the children and isn’t hidden by their backgrounds). This also keeps rounded corners continuous and avoids seams.

Example (markup + CSS):

<div class="panel">
  <div class="col logo">…</div>
  <div class="col promo">…</div>
  <div class="col desc">…</div>
</div>
.panel {
  position: relative;
  display: flex;            /* or keep your floats and use overflow:hidden/clearfix */
  border-radius: 6px;
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 8px 16px rgba(0,0,0,0.25);
}
.col { padding: 12px; }
.col.logo, .col.promo { flex: 0 0 15%; }
.col.desc { flex: 1 1 auto; }

If changing markup isn’t an option, you can approximate a continuous inset by using comma-separated inset shadows on a container (or on each column, carefully offset so neighboring edges overlap). Example for layered top+bottom inner shadows:

box-shadow:
  inset 0 8px 12px rgba(0,0,0,0.18),
  inset 0 -8px 12px rgba(0,0,0,0.12);

Troubleshooting notes: if you keep floats make sure the parent clears them (clearfix or overflow:hidden) so the parent’s radius and shadow match the children. Remove individual corner radii on the columns and apply them to the parent for a seamless look. Use pointer-events:none on the shadow pseudo-element so it never blocks clicks. For very old browsers (IE8) inset shadows aren’t supported—use a background image fallback if needed.

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.