CODEWITHSUNDEEP
htmlcssstyling
Exhausted
Exhausted

Reputation: 179

CSS Drop Shadow on Body

I have a layout build by chopping and changing several themes together. On that layout there is a shadow behind all the content which is triggered with this CSS:

body {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}

So now i am rebuilding the theme myself so i can structure the div's and the css the way I want it. The original design had a header which just had its text aligned to the right. For the rebuild i made a 3 column layout for the header so i can add a photo to the left side and some content in the center.

Im not able to use the above shadow code in my new layout. It doesn't drop a shadow around the content for me. Instead if i take the below code and drop it into each Div ID's CSS for each of the 3 columns it will drop a shadow... however the shadow spills over into the second column and into the third column

-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;

Now im not great with HTML & CSS but im trying my best. I tried to put the 3 cols into a DIV and drop the shadow onto that div but it still didn't work. I tried butting the cols into where the * symbols are in the code below

 <div id="blah">**************</div>

Anyone any suggestions on what im missing?

Upvotes: 2

Views: 7895

Answers (1)

middleinitial
middleinitial

Reputation: 659

Applying the drop shadow to the outside div is the right idea but if you are using divs to make the inner columns you need to apply a clearfix to the last element. 

<div id="blah">
   <div class="third">First</div>
   <div class="third">Second</div>
   <div class="third">Third</div>
   <div class="clear"></div>
</div>

with the css

.clear { clear:both; }

Is this the effect you were looking for? http://jsfiddle.net/LcBUX/3/

Upvotes: 2

Related Questions