Creating a full-width shadow beneath a div:

I recently added a fixed header with a shadow to my website, but it doesn't adjust to the 100% width of my browser. What could be causing this issue?

Below is the CSS I used:

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 screenshot for reference:

https://i.sstatic.net/weuxQ.png

htmlcssshadow

Answer №1

To achieve full width with a negative spread radius, you should use the following code:

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

Check out this demonstration: 

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>

Answer №2

For the ultimate waterproofing solution, try elongating your element   (using either the width or padding property) beyond the viewport size, and apply negative margins (please note: negative margins are essential for non-fixed elements). Here is the updated css for your #head:

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

Furthermore, it's recommended to set the border-radius spread property to a non-negative value, or you may opt for using distinct box-shadows for each side, as suggested in other responses.

Answer №3

Position the fixed element by specifying values for left, top, and right.

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

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

Check out the fiddle here: https://jsfiddle.net/hpdymvqg/

Answer №4

The problem arises from the presence of a negative value in your box-shadow property. By adjusting it, the issue can be resolved:

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

Demonstrated with an example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The left margin of the Bootstrap 12 column grid is not aligned correctly

Currently, I am utilizing Bootstrap in conjunction with Vue within an App.vue file. One issue I have encountered is the excessive empty space on both the left and right sides when using Bootstrap. An image has been provided below for reference. I followed ...

cssvue.jsbootstrap-4

Issue with flexbox max-width property not being applied when resizing the page width

I'm struggling to make a flex box with max and min width properties work properly. When I reduce the page size, it ends up showing blank space instead of resizing. How can I troubleshoot this issue? .parent{ border: 1px solid red; width: 50%; ...

htmlcssflexbox

Having trouble with html2canvas capturing pseudo elements?

I'm currently working on saving an image of a div that has a pseudo element. However, I've discovered that html2canvas does not support pseudo elements. Is there another library available to save a div as an image? I am utilizing the following ...

javascriptjqueryhtmlcanvashtml2canvas

Aligning images horizontally within individual div containers within a list

Struggling to align images horizontally, they are all stacked on top of each other. New to this and could use some assistance figuring it out! Any help would be appreciated! <div class="social"> <ul> <div class="facebook"> ...

htmlcssalignmenthtml-lists

In what way does Google+ make their logo come to life on the left side of the navigation bar when the scrollbar is minimized?

I'm curious about the animation Google+ uses to make their logo slide in on the navigation bar when it shrinks. I've managed to shrink the scrollbar on scroll, but I can't quite replicate their technique for animating the icons. I'm eag ...

javascriptjqueryhtmlcss

Adding dynamic colors to nested and sibling divs with a specific class

I am facing an issue with applying alternating colors to nested divs. The challenge is that these divs are not always siblings within the list items. Here is the HTML structure: <ul> <li> <div class="R">Bat</div> ...

javascriptjqueryhtmlcss

Using Javascript to display JSON data in separate HTML tables after applying filters

I am faced with the challenge of creating multiple HTML tables based on specific column values in a JSON file. Currently, my code successfully loads the JSON data into a table without any filters applied. var data = {"headers":["plat","chan","group","03" ...

javascripthtmljsonhtml-table

Alter the input background color steadily through javascript transformation

Is there a way to gradually fade in a new background color using JavaScript only? I am currently changing the background color with the following code: // html <input onfocus="onFocus(this)" onblur="onFocus(this)" type="text"> // JS function onFoc ...

javascripthtml

What could be causing the width of a table row (tr) in a table element to not function properly, while the height is functioning as expected?

My code is as follows: .table1 { background-color: gray; display: flex; justify-content: ; align-items: ; height: 400px; margin-left: 40px; padding-left: ; } .table1 tr { background-color: blue; height: 50px; width: 50px; } <tabl ...

htmlcss

How can AngularJS effectively parse JSON data containing HTML elements?

We are experiencing difficulties in reading a json file containing html content. Here is the code snippet with the json data we are working with: Json data: { "aboutContent": { "listItems": [{ "title": "Investors", "de ...

javascripthtmljsonangularjs

Dealing with a divided image in a separate thread: What you need to know

I am facing a challenge with incorporating a LARGE image into a website, which is affecting performance. My solution is to divide the image into smaller pieces and stitch them together using a grid upon loading. The only issue is that it must be in the ba ...

htmlimagecsscss-grid

It appears that when using Python's Selenium to open Chrome, the HTML page is dynamically inserting an iframe element

Recently, I started delving into the world of selenium and web automation, attempting to develop a program to streamline paper searches on PubMed using chromedriver. My primary goal is to automate the process of clicking the "Sign in" button located in th ...

pythonhtmlseleniumiframeselenium-chromedriver

Menu bar placed atop a carousel

I am currently in the process of developing a website and I have encountered an issue with the navigation bar. I have a slider that I would like to appear below the navbar but the navbar is pushing it down instead. Ideally, I want the navbar to be transpar ...

htmlcssnavbarbootstrap-4

Does the use of CSS positioning impact the performance of browser rendering?

Given two DIVs, A and B, where A contains B, and the following CSS styles: A { margin-left: -2000px; } B { margin-left: 2000px; } With these CSS styles applied, the position of B remains unchanged compared to its original position without any CSS. I am c ...

cssperformancerendering

Aligning or positioning two divs to be equal in size alongside other divs

I am facing an issue trying to make two divs (.profile-spotify, .profile-games) the same size as .profile-card and .profile-details, or centering them. I've attempted using justify-center, margin auto, and other methods but none have been successful. ...

htmlcss

Unable to successfully append a unique character using jQuery

I need help with displaying special characters, specifically the degree symbol (°), in JavaScript/jQuery. Despite my efforts, it is not showing up correctly on the webpage. How can I fix this issue and ensure that the degree sign appears as desired? I ...

javascriptjqueryhtmlencoding

Add a line break between two ionic form inputs

Is there a way to insert a line break between these Ionic form elements? Here is the current layout: https://i.sstatic.net/BxTcW.png Here is the desired layout: https://i.sstatic.net/mSlnK.png This is the code I have so far: <div class="item i ...

htmlcss

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...

javascriptjqueryhtml

Chrome not displaying Bootstrap dropdowns correctly

Lately, I've been exploring Bootstrap and experimenting with its dropdown menus. Typically, I use Chrome for my work but encountered a strange issue with how Chrome is handling my dropdown menus. This forced me to temporarily switch to Edge. Here&apos ...

jqueryhtmlbootstrap-4

No matter what I try, the design of my dialog box remains stubbornly unchanged

I am attempting to increase the width of my dialog box while also adding horizontal middle borders. It seems that my bootstrap for the site does not include these elements. How can I rectify this issue? Here is my code: $(document).ready(function() { ...

javascriptjqueryhtml