#div1's shadow spreads on #div2

Question

I have two floated divs. They are close enough to each other. When I use box-shadow on that divs, one of the shadows spreads on the other one. I want them NOT to spread on their shadows. I've tried z-index, no hope there..

Here my code goes:

<div class="bloklar">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS:

.bloklar
{
    padding:0;
    position:relative;
    width:1000px;
}
.bloklar div
{
    display:block;
    padding:5px;
    margin:5px;
    width:230px;
    height:280px;
    background-color:white;
    float:left;
    font-size:20px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    z-index:2;
    box-shadow:         0px 0px 30px 0px rgba(50, 50, 50, 0.75);
}

Cheers.

Please demo the issue...cannot reproduce any issue based on the above. — Paulie_D, Oct 30 '14 at 18:11
http://jsfiddle.net/4pc5ckps/ here you can see, right sides of my divs have been effected from the shadow of the divs which stand right of them. — , Oct 30 '14 at 18:15
Nope...looks right to me. Perhaps you could give us an image of what this is supposed to look like? — Paulie_D, Oct 30 '14 at 18:16
I don't understand How can't you see this :) Just look at the right side of divs. Right sides are effected by shadows. They are a little black. They have to be white. :) — , Oct 30 '14 at 18:18
also bottom side of divs are effected, so they are a little black as well.. — , Oct 30 '14 at 18:19
Just imagine one div with that box-shadow codes. It's content is completely white, but when you add another next to it, Same div's right and bottom sides become a little black. Could I explain it? — , Oct 30 '14 at 18:25

chdltest · Answer 1 · 2014-10-30T18:33:58.687

Edit:

Here's the solution based on what you want: http://jsfiddle.net/4pc5ckps/4/

Added another div inside the div you wanted to have shadows:

<div class="bloklar">
<div class="shadow-container"><div></div></div>
<div class="shadow-container"><div></div></div>
<div class="shadow-container"><div></div></div>
<div class="shadow-container"><div></div></div>
<div class="shadow-container"><div></div></div>
<div class="shadow-container"><div></div></div>

Then gave the following CSS:

.bloklar {
        padding:0;
        position:relative;
        width:1000px;
}

.bloklar .shadow-container {
        display:block;
        margin:5px;
        width:230px;
        height:280px;
        background-color:white;
        float:left;
        font-size:20px;
        -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    0px 0px 30px 0px rgba(50, 50, 50, 0.75);
        box-shadow:         0px 0px 30px 0px rgba(50, 50, 50, 0.75);
}

.bloklar .shadow-container div { 
    background-color: white;
    padding: 5px;
    margin: 0px;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

thanks for answer, I want them have shadows all inside of .bloklar, but the shadows mustn't effect other div's content, currently, it does. http://jsfiddle.net/4pc5ckps/ — , Oct 30 '14 at 18:14
The biggest difference is that one is using an absolute position while the other is relative. — chdltest, Oct 30 '14 at 18:38

score 0 · Accepted Answer · answered Oct 30 '14 at 18:25

I would create a div inside that is going to cover the shadow. Try this solution, it's working!

HTML

<div class="bloklar">
    <div>
        <div>
            your content
        </div>
    </div>
    <div>
        <div>
            your content
        </div>
    </div>
</div>

CSS

.bloklar {
    padding: 0;
    position: relative;
    width: 1000px;
}

.bloklar > div {
    display: block;
    margin: 5px;
    width: 240px;
    height: 290px;
    float: left;
    font-size: 20px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 30px 0px rgba(50, 50, 50, 0.75);
}

.bloklar > div > div {
    width: 230px;
    height: 280px;
    padding: 5px;
    background-color: #ffffff;
    z-index: 2;
    position: absolute;
}

it perfectly works, thank you.. I am suprised to see that works. Conclusion: divs are capable of cutting off shadows.. :) — , Oct 30 '14 at 18:30

#div1's shadow spreads on #div2

2 Answers2