CODEWITHSUNDEEP
csshtmlpositioning
Victor Mukherjee
Victor Mukherjee

Reputation: 11025

putting a less wide div on a wider div

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 */

}

Upvotes: 0

Views: 145

Answers (1)

Jaideep Singh
Jaideep Singh

Reputation: 141

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 */
}

Upvotes: 2

Related Questions