CODEWITHSUNDEEP
htmlcss
Joe Mornin
Joe Mornin

Reputation: 9134

box-shadow won't display on the bottom of the div

I have a page that looks like this:

box-shadow http://www.morninj.com/images/box-shadow-screenshot.png

The middle div (with "Quotation." as its contents) has a box-shadow property applied. For some reason, the shadow won't appear below the second div if the third div is present. Does anybody know why?

HTML:

<div id="header">
    <h1>Title</h1>
</div><!--/#header-->
<div id="subheader">
    <h2>"Quotation."</h2>
</div><!--/#subheader-->
<div id="blurb">
    <div id="blurb-container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div><!--/#blurb-container-->
</div><!--/#blurb-->

CSS:

div#header {
    background-color: #444;
    padding: 20px 0;
}

    div#header h1 {
        color: #fff;
        font-family: 'Arvo', sans-serif;
        font-size: 50px;
        font-weight: bold;
        text-align: center;
        text-shadow: 1px 1px 1px #000;
    }

div#subheader {
    background-color: #777;
    box-shadow: 0 0 3px 2px #333;
    padding: 10px;
}

    div#subheader h2 {
        color: #efefef;
        font-family: 'Merriweather', serif;
        font-size: 14px;
        font-style: italic;
        line-height: 24px;
        text-align: center;
    }

div#blurb {
    background-color: #efefef;
    padding: 20px;
}

    div#blurb div#blurb-container {
        margin: 0 auto;
        width: 800px;
    }

Upvotes: 1

Views: 2837

Answers (2)

cmplieger
cmplieger

Reputation: 7351

Set the position of both elements to relative and the z-index of the first one to 1 and the lower one to 0.

Edit: yes, negative values are allowed :). But they don't work in firefox 2.

Upvotes: 2

clmarquart
clmarquart

Reputation: 4711

Your 'blurb' is covering it up. Edit the div#blurb css rule to the following to move it behind the shadowed div:

div#blurb {
    background-color: #efefef;
    padding: 20px;
    position:relative;
    z-index:-1;
}

Upvotes: 6

Related Questions