how to stretch the header background color across the web browser?

Question

I am having a hard time to create make the background color stretch across the browser

here is some code

body {
    font-size: 1.1em;
    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
    margin: 0px auto;
    padding-bottom: 25px;
    width: 980px;
}


div#black_bar{
    background-color: #000000;
}
div#header {
    height: 66px;
    font-family: arial;
    margin: 0 auto;
    color: #FFFFFF;
    margin-top: 5px;
}

of course as you can see i have specified the width to be 980px in the body and this apply to the header of course, any ideas how to solve this

and by the way this black bar is actually a div containing the header in it

Thanks in advance.

This may be duplicate. http://stackoverflow.com/questions/2309819/how-to-stretch-a-header-across-a-web-page-background-with-css http://stackoverflow.com/questions/4725690/how-to-stretch-header-across-the-screen — Mr. Black, Mar 11 '12 at 13:11
i have seen this but it doesn't answer the question it was asking about centering the elements whitch would be with margin: 0 auto; what i am trying to do is that the header by default takes width 980 px with the body and the background color can't be stretched past 980 px and there is my problem that it would look not good on the big screens — Mohamed Hassan, Mar 11 '12 at 13:16

darma · Accepted Answer · 2012-03-11T13:22:11.717

You will need the header wrapper to be inside the body with width 100%, and to specify width=980px both on the header and content below, like this :

CSS

body, html{
    width:100%;
}

div#black_bar{
    background-color: #000000;
    width:100%;
}
div#header {
    height: 66px;
    font-family: arial;
    color: #FFFFFF;
    margin-top: 5px;
    width:980px;
    margin:0 auto;
}

#content{
    font-size: 1.1em;
    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;  
    padding-bottom: 25px;
    margin: 0 auto;
    width: 980px;
}

HTML

<body>

<div id="black_bar">
    <div id="header">
    </div>
</div>

<div id="content">
</div>

</body>

how to stretch the header background color across the web browser?

1 Answers1