How to make shadow 100% width under div

Question

I made a fixed header div to my site and added a shadow under it but it doesn't fit my browser (100% width) ??

here is my css:

body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}

#head{
   width: 100%;
   height: 60px;
   background-color: #5B86E1;
  
   box-shadow: 0 10px 17px -5px #000000;
   position: fixed;
}

#content{
   width: 900px;
   padding-top: 60px;
   min-height: 100px;
   background-color: #FFFFFF;
   margin-right: auto;
   margin-left: auto;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <div id="head">
 </div>
 
 <div id="content">
 </div>
</body>
</html>

Here is a screen capture:

score 4 · Answer 1 · answered Nov 04 '15 at 22:01

You have a negative spread radius; for it to be full width you want this:

box-shadow: 0 10px 17px 0px #000000;

Demo:

body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}

#head{
   width: 100%;
   height: 60px;
   background-color: #5B86E1;
  
   box-shadow: 0 10px 17px 0px #000000;
   position: fixed;
   
   margin-right: auto;
   margin-left: auto;
}

#content{
   width: 900px;
   padding-top: 60px;
   min-height: 100px;
   background-color: #FFFFFF;
   margin-right: auto;
   margin-left: auto;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <div id="head">
 </div>
 
 <div id="content">
 </div>
</body>
</html>

score 0 · Answer 2 · answered Nov 04 '15 at 22:00

Give the fixed element a position using left top ``right```

header{
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    height:60px;

    background-color:#00f;
    box-shadow:0px 0px 17px #000;
}

Added a fiddle: https://jsfiddle.net/hpdymvqg/

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

The most waterproof solution: make your element longer (either with the width or padding property) than the viewport, and set negative margins (note: the margins are only really required to make this work with non-fixed elements). Your new #head css:

#head {
   width: 110%;
   margin: 0px -5%;
   height: 60px;
   top: 0;
   background-color: #5B86E1;
   box-shadow: 0 10px 17px 0px #000000;
   position: fixed;
}

As other answers have mentioned: it is advised to set the border-radius spread property to a non-negative value. Or you could use separate box-shadows for each side.

edited May 23 '17 at 11:51

Community

1
1

answered Nov 04 '15 at 22:03

webketje

10,376
3
25
54

Thanks Tyblitz, This is a very interesting solution. Bernhard's solution is good too ;-) – fendert12 Nov 04 '15 at 22:16

score 0 · Answer 4 · answered Nov 04 '15 at 22:04

0

The issue is beause you have a negative value for your box-shadow. Changing it to the following fixes the issue:

box-shadow: 0 10px 17px 0px #000000;

Tested here

answered Nov 04 '15 at 22:04

Shadow

3,926
5
20
41

nope. you realize you test did not fix anything, right? ;) – SuN Apr 10 '20 at 12:45

How to make shadow 100% width under div

4 Answers4