CODEWITHSUNDEEP
htmlcss
JoeIsBlogging
JoeIsBlogging

Reputation: 185

How to make a banner take up the whole width of the screen CSS

i need the div bar to take up the whole width of the screen. I've tried using width:1920px; but then if i change my screen res it gives it a scroll bar. I've also tried width:100%; but that didn't work either!

CSS 

#bar {
    background: white;
    font-family: Designio;
    margin-top: -76px;
    position: absoulte;
    top: 115px;
    padding: 15px;
    height: 60px;
    width: 1930px;
    margin-left: -600px;
    background-size: 100%;
}

body {
    min-width: 768px;
    margin: 0px;
    background: #0e6585;
    font-size: 40px;
}

img.top {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#container {
    height: 768px;
    background: #0e6585;
    font-family: Designio
}

#inner {
    text-decoration: none;
    box-shadow: inset 1px 1px 10px 2px #fff;
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 100px;
    width: 800px;
    height: 600px;
    background: #0e6585;
    padding: 20px;
    color: #946e44;
    text-align: center;
}

#nav a.active {
    background-color: #0e6586;
    color: white;
}

#nav {
    height: 10px;
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0px;
    background-color: white;
    margin-top: -10px;
    border-bottom: 1px solid white;
}

#nav ul {
    list-style: none;
    width: 900px;
    margin: 0 auto;
    padding: 0;
    text-align: center
}

#nav li {
    float: left;
    text-align: center
}

#nav li a {
    margin-top: 15px;
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: #0e6585;
    border-right: 1px solid #ccc;
    text-align: center
}

#nav li a:hover {
    color: #0e6586;
    background-color: white;
    text-align: center
}

HTML

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="css/Primary.css">
    </head>
    <body>
        <div id="container">

            <div id="inner">

                <div style="margin-top: -120px">

                    <div id ="bar">
                        <div id="nav">
                            <ul>
                                <li>
                                <li>
                                    <a href="home.html" class="active">Home</a>
                                </li>
                                <li>
                                    <a href="#">About</a>
                                </li>
                                <li>
                                    <a href="#">Graphics</a>
                                </li>
                                <li>
                                    <a href="#">Web Design</a>
                                </li>
                                <li>
                                    <a href="#">Contact</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Views: 34050

Answers (3)

user3033991
user3033991

Reputation: 1

You could use width:*;. That should make it take up the whole screen in width.

Upvotes: -1

Joel Etherton
Joel Etherton

Reputation: 37533

Use margin on your parent div.

.container
{
    margin-left: 0px;
    margin-right: 0px;
}

A fiddle: http://jsfiddle.net/PVKbp/

In another blaring omission of reading, your #bar element is set to position absolutely within two other elements. You'll need to take it out of the the container (unless you need it positioned within the container) in order for left: 0; right: 0 to work properly. If you need it to be within the container, you'll also need to extend the container using the margin properties above.

Upvotes: 1

tuff
tuff

Reputation: 5153

To get an element to fill the width of the viewport, it should either be absolutely positioned, and a descendant only of elements which also fill the width of the viewport (eg: body, descendant divs of body which do not have set widths), OR it should be fixed position. Then, the element needs to have left: 0 and right: 0.

Change your #bar ruleset to this:

#bar{
    background:white;
    font-family:Designio;
    position:absolute;
    left: 0;
    right: 0;
    padding:15px;
    height:60px;
    background-size:100%;      
}

summary:

  1. Remove all redundant sizing and negative margin properties.
  2. Fix the typo in your stylesheet - change position: absoulte to position: absolute.
  3. Set left: 0 and right: 0.

demo: http://jsbin.com/ofeful/1/edit

Upvotes: 4

Related Questions