1

I have a DIV that I'm using as a "separator".

Requirements:

  • That separator should be placed on the bottom of the header.
  • I need that separator to span across the full viewport width.
  • I need to style it using box-shadow on it.

Problems:

  • I have an outer Layout DIV that limits everything to max-width = 500px;
  • My header is not fixed (it's sticky, so it only becomes fixed after some scroll). It starts as relative, so I can absolute position the separator.
  • I had to make the separator DIV with position: absolute and width: 100vw so make it span the full viewport with.

QUESTION

  • It works as intended if I use the border-bottom property. It spans the full width of the viewport (1st snippet).
  • But it doesn't work with box-shadow (nothing is displayed. 2nd snippet). Why? Is it possible to make it work with box-shadow in this situation?

SNIPPET: works with border-bottom

.layout {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.header {
  height: 120px;
  background-color: lightblue;
  position: relative;
}

.separator {
  position: absolute;
  width: 100vw;
  height: 3px;
  top: 100%;
  border-bottom: 1px solid black;
  /*box-shadow: 0 4px 3px -3px black;*/
 left: 50%;
 transform: translate(-50%, -50%);
}

.main {
  height: 150px;
  background-color: lightgreen;
}
<div class="layout">
  <div class="header">
    Header
    <div class="separator"></div>
  </div>
  <div class="main">
    Main
  </div>
</div>

SNIPPET: does NOT work with box-shadow

.layout {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.header {
  height: 120px;
  background-color: lightblue;
  position: relative;
}

.separator {
  position: absolute;
  width: 100vw;
  height: 3px;
  top: 100%;
  /*border-bottom: 1px solid black;*/
  box-shadow: 0 4px 3px -3px black;
 left: 50%;
 transform: translate(-50%, -50%);
}

.main {
  height: 150px;
  background-color: lightgreen;
}
<div class="layout">
  <div class="header">
    Header
    <div class="separator"></div>
  </div>
  <div class="main">
    Main
  </div>
</div>
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
  • I could set box-shadon on `header` it self.. And that's what I was doing before I needed a "sticky" header. But now my header starts as `static / relative` and it only becomes `fixed` after some scroll. When it's on the `fixed` "phase" there's no mistery. It will span the full viewport for sure. But when it's `static / relative`, my outer Layout div is limiting it's width. My plan B is to get rid of the Layout div and pass the `max-width` property down to its children. But I like the idea of controlling the `max-width` of my website in a single place. – cbdeveloper Jul 25 '19 at 17:15

2 Answers2

1

The 5-value box-shadow shorthand you're using sets the following properties:

offset-x | offset-y | blur-radius | spread-radius | color

Your spread radius is set to -3px. This diminishes the "height" of the shadow to 0, since the height of your separator is 3px.

The shadow will display if you increase the spread radius. Try this instead:

box-shadow: 0 4px 3px 0px black
Ian
  • 329
  • 1
  • 11
  • You're right. I did that because I need a shadow only at the bottom part. And it was working in other DIVs. That exact same box-shadow. Why doesn't it work in this one? Do you know? – cbdeveloper Jul 25 '19 at 17:17
  • Which other DIV's was it working on? `0 2px 3px -1px black` moves the shadow to the bottom of the separator. – Ian Jul 25 '19 at 17:23
  • If you set a bigger height, it works. That oposite `3px and -3px` it to hide the top part of the shadow. But somehow it only works in divs with some height. Try to keep my origin `box-shadow` and increase the `height` of the separator div. The shadow will show! – cbdeveloper Jul 25 '19 at 17:24
  • Your answer helped me to get there. See my answer below with how I've ended up doing. With the same `box-shadow` I was using. Thank you! – cbdeveloper Jul 25 '19 at 17:28
  • See this question: https://stackoverflow.com/questions/4561097/css-box-shadow-bottom-only – cbdeveloper Jul 25 '19 at 17:29
0

Somehow the box-shadow property in that situation need some minimal height render a shadow. I've managed to find a solution. See snippet below.

.layout {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.header {
  height: 120px;
  background-color: lightblue;
  position: relative;
}

.separator {
  position: absolute;
  width: 100vw;
  height: 10%;
  top: 95%;
  /*border-bottom: 1px solid black;*/
  box-shadow: 0 4px 3px -3px black;
 left: 50%;
 transform: translate(-50%, -50%);
}

.main {
  height: 150px;
  background-color: lightgreen;
}
<div class="layout">
  <div class="header">
    Header
    <div class="separator"></div>
  </div>
  <div class="main">
    Main
  </div>
</div>
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336