Overflow hidden and clear:both removes paper effect shadow - html

Question

I want to create a paper effect shadow using the following css, but I have 3 divs inside this a div which need to be side by side. I use float to make the divs side by side, but this makes the parent's div height smaller than the inner content. I tried clear:both and overflow: hidden to fix the issue which makes the height relative to the content but this removes the shadow effect.
CSS
.boxcontainer {
position:relative;
width:90%;
}
.boxcontainer:before,
.boxcontainer:after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.boxcontainer:after{
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
HTML
<div id="paperbox" class="boxcontainer">
<img class="mafacemobile" src="/images/maface.jpeg" alt="ma face" width="183px" height="183px">
<div id="textwrapper">
<h1>
FILLING MORE TEX
</h1>
<div id="icons"
<img...>
</div>
</div>
</div>

Answer 1

I wasn't 100% sure of exactly what you had in mind for the end result due to the minimal code you provided, but hopefully this is close!
Check out my pen for a working model: http://codepen.io/gnowland/pen/crGtE
...and here's the finished code:
HTML
<div id="paperbox" class="boxcontainer">
<div class="boxinner">
<img style="-webkit-user-select: none" src="http://placehold.it/183x183" class="mafacemobile" alt="ma face" width="183px" height="183px">
<div id="textwrapper">
<h1>FILLING MORE TEXT</h1>
<div id="icons"><img style="-webkit-user-select: none" src="http://placehold.it/50"></div>
</div>
</div>
</div>
CSS
.boxcontainer {
margin: 10px;
display: inline-block;
position: relative;
background-color: #fff;
z-index: -1;
}
.boxcontainer:before {
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background-color: #fff;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.boxcontainer:after {
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background-color: #fff;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
.boxinner{
position: relative;
padding: 20px;
z-index: 1;
}
.boxinner > * {
/* NOTE: This is just for demo, utilize the exact selectors in your code */
display: inline-block;
padding: 2px
}
I used your .boxcontainer as a wrapper and added an inner div (.boxinner) to hold the contents so you can pad it, etc.
The major addition was using display: inline-block. Get friendly with that property, it's awesome.
You can play around with my code on codepen and let me know if you have any follow-up questions.
Hope this solved it for you! :-)
EDIT: I just realized your original question was from 7 months ago... you've probably figured it out already but hopefully this helps someone else.

Answer 2

Try adding position:relative to .boxcontainer
Could you provide the CSS for .boxcontainer and it's contents, too?
And also, which container is .drop-shadow being applied to?
It would be a good idea to set up a jsfiddle