Home/ Questions/Q 8678759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T20:48:15+00:00

I am a novice in web developing. My container div is set to margin:

  • 0

I am a novice in web developing. My container div is set to margin: 0 auto; position: relative; and it is displayed in the middle of the screen. I have a banner div within the container which has some background color which I want to extend the whole width of the screen. I decided to use another div outside the containerdiv with same background color and height of my banner div and named it header. But how can I put them one over another, more precisely, the container div over the header div?

EDIT:
Some of the html:

<body>
  <div id="header"></div>
  <div id="container">
    <div id="banner">
      <img src="images/banner.gif" width="450" height="80" alt="parul library" />
    </div>
  </div>
</body>

The CSS:

#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}

#header {
position:absolute;
top:0;
height: 80px;
background: rgb(222,239,255); /* Old browsers */

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try using this CSS for the header div:

    .header {
    background: #bada55;
    height: 90px;
    width: 100%;
    position: absolute;
}

    And make sure container has position: relative; in its style definition.

    Here’s a working demo:
    http://jsfiddle.net/rkJMJ/

    Update for the HTML and CSS posted in the question:

    (Added width: 100; to the #header style def)

    #container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}

#header {
position:absolute;
top:0;
height: 80px;
width: 100%;
background: rgb(222,239,255); /* Old browsers */
}
    • 0