CODEWITHSUNDEEP
css
Tech163
Tech163

Reputation: 4286

Make div background color span entire width

What I'm trying to do is have a bootstrap like navbar where the actual navbar is around 960px in the center but have the background color span the entire width of the window.

However, when the window is less than 960px in width, and I scroll, the background doesn't go all the way to the end.

Is it possible to make this happen without having custom rules for max-width(960px)?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
    <style type="text/css">
    #container {
        width: 960px;
        margin: 0 auto;
    }
    #nav {
        height: 33px;
        background-color: #cfcfcf;
    }
    </style>
</head>
<body>
<div id="nav">
    <div id="container">
        test
    </div>
</div>
</body>
</html>

Thanks in advance!

Edit: Oops. Had an extra in there, though that wasn't the issue.

Upvotes: 2

Views: 22098

Answers (4)

Tech163
Tech163

Reputation: 4286

I added

body {
    min-width:960px;
}

which seemed to fix the problem.

Upvotes: 0

Panos Bariamis
Panos Bariamis

Reputation: 4653

The height has to be in the inner div (#container). try 

#nav { background-color: #cfcfcf; }

#container {  
    height:33px;
    width:960px;
    margin: 0 auto; 
}

see http://jsfiddle.net/wYGLj/

Upvotes: 1

Giacomo1968
Giacomo1968

Reputation: 26066

Your CSS is working as it should. So if you want it to extent the whole length of the screen, create a wrapper to handle that grey element. Like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
    <style type="text/css">
    #wrapper {
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #cfcfcf;
    }
    #container {
        width: 960px;
        margin: 0 auto;
    }
    #nav {
        height: 33px;
    }
    </style>
</head>
<body>
<div id="wrapper">
<div id="nav">
    <div id="container">
        test
    </div>
</div>
</div>
</body>
</html>

Upvotes: 0

jchapa
jchapa

Reputation: 3996

You need your nav div to span the entire page.

#nav { width:100%; }

will work in this case.

Upvotes: 0

Related Questions