CSS Shadow for two boxes as one - html

Question

Due to my website designed, i need to join two divs, and they need to look as one.
So no borders, and everything white, they look the same div.
Now i need to add a shadow, and things get complicated!
So far i achieve this, but i cant figure it out how to make it look nice!
#one {
height: 300px !important;
width: 300px !important;
float:left;
box-shadow:-1px 1px 1px 0px #888888 !important;
}
#two {
float:right;
height: 300px !important;
width: 300px !important;
box-shadow:1px 1px 1px 0px #888888 !important;
}
#wrapper{
width:600px;
}
<div id="wrapper">
<div id="one">The two divs are</div>
<div id="two">next to each other.</div>
</div>
I need to remove that line in the middle, and also at the bottom you can se a little gap.
Please help!

Answer 1

As has been mentioned in the comments, you should be looking to apply the box-shadow on the container and not on the inner elements. That would allow to display as if the shadow effect was applied on a single element. I guess that is what you are looking for. See the snippet below.
#one {
height: 300px;
width: 40%;
float:left;
}
#two {
float:right;
height: 300px;
width: 40%;
}
#wrapper {
width:100%;
box-shadow: 2px 2px 5px 3px #888;
}
.clear {
clear: both;
}
<div id="wrapper">
<div id="one">Left-floated</div>
<div id="two">right-floated.</div>
<div class="clear"></div>
</div>
Again, if you are looking to make the div's perfectly align next to each other without any blank space in between, you can remove the width property from both the inner and outer elements and add display: inline-block;. This would ensure that the outer as well as the inner containers
only take up as much space as needed horizontally. See this below :
#one {
height: 300px;
display: inline-block;
float:left;
}
#two {
float:left;
height: 300px;
display: inline-block;
}
#wrapper {
display: inline-block;
box-shadow: 2px 2px 5px 3px #888;
}
.clear {
clear: both;
}
<div id="wrapper">
<div id="one">The two divs are </div>
<div id="two">next to each other.</div>
<div class="clear"></div>
</div>
The below snippet is just an example of how the outer container would expand based on the content it contains:
#one {
height: 300px;
display: inline-block;
float:left;
}
#two {
float:left;
height: 300px;
display: inline-block;
}
#wrapper {
display: inline-block;
box-shadow: 2px 2px 5px 3px #888;
}
.clear {
clear: both;
}
<div id="wrapper">
<div id="one">Just random text to increase width The two divs are </div>
<div id="two">STILL next to each other.</div>
<div class="clear"></div>
</div>
Hope that helps!!!