Home/ Questions/Q 8407087
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T23:16:58+00:00

I have the following markup. <!DOCTYPE html> <html lang=en> <body> <div id=wrapper> <div id=container>

  • 0

I have the following markup.

<!DOCTYPE html>
<html lang="en">
<body>
<div id="wrapper">
<div id="container">
<div id="navigation">
</div>
</div>
</div>
</body>
</html>

With the following CSS

body
{
width: 100%;
background-color: #E4E4E4;
font-size: 16px;
line-height: 19px;
font-family: Cambria, Georgia, serif;
}

div#wrapper
{
width: 960px;
margin: 0 auto;
background-image: url("nav_bg.png");
background-repeat: no-repeat;
background-position: center 219px;
}

div#container
{
width: 920px;
background-color: #F9EADE;
box-shadow: 0 0 15px 5px rgb(31, 73, 125);
margin: 0 auto;
}

div#navigation
{
height: 50px;
margin-bottom: 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px -4px rgba(0, 0, 0, 0.8);
}

The nav_bg.png is this

enter image description here

And I get white unshadowed space in the bottom left and right

enter image description here

If I change the code to this

div#navigation
{
height: 50px;
margin-bottom: 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px 0px rgba(0, 0, 0, 0.8);
}

I get additional shadow on left and right sides as this.

enter image description here

And If I remove background-color and border-shadow from the div#navigation as follows.

div#navigation
{
height: 50px;
margin-bottom: 200px;
}

I get this

enter image description here

Sorry I messesd up the question real bad before.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could also just make the div little wider so it would reach to the sides.
    If you could show the code, I could show you how.

    EDIT:
    Just add minus margin to left and right to navigation and add width so it would reach the sides what you need

    margin: 0 -20px 200px;
width: 947px;

    EDIT2:
    If this does not work then there is something that you are not showing or you’re doing it wrong.

    body
{
width: 100%;
background-color: #E4E4E4;
font-size: 16px;
line-height: 19px;
font-family: Cambria, Georgia, serif;
}

div#wrapper
{
width: 960px;
margin: 0 auto;
background-image: url("oBecq.png");
background-repeat: no-repeat;
background-position: center 219px;
}

div#container
{
width: 920px;
background-color: #F9EADE;
box-shadow: 0 0 15px 5px rgb(31, 73, 125);
margin: 0 auto;
height: 500px;
}

div#navigation
{
height: 50px;
margin: 0 -10px 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px -4px rgba(0, 0, 0, 0.8);
top: 219px;
position: relative;
width: 950px;
}
    • 0