CODEWITHSUNDEEP
htmlcss
onTheInternet
onTheInternet

Reputation: 7253

whats causing my horizontal scroll bar

The website I'm developing has a horizontal scroll bar and I'm not sure why.

Fiddle

HTML

<body>
    <div id="header">
        <div id="logoHolder">
            Logo
        </div>
        <div id="loginHolder">
            Login
        </div>
        <div class="container_12">
            <div class="grid_12">
                <div id="navigationHolder">
                    <ul id="navigation">
                        <li><a href="#">GuidedChoice</a></li>
                        <li><a href="#">Pricing</a></li>
                        <li><a href="#">FAQs</a></li>
                        <li><a href="#">Investment Tools</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body {
}


/*Header*/
#logoHolder{
    width:20px;
    background-color:green;
    float:left;
}

#loginHolder{
    width:20px;
    background-color:green;
    float:right;
}

#navigationHolder{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:775px;
    background-color:brown;
    height:auto;
}

/*Navigation*/
#navigation{
    list-style:none;
    font-family:Arial;
    font-size:1.3em;
}

    #navigation li{
        float:left;
        display:block;

    }

    #navigation li a{
        color:inherit;
        text-decoration:none;
        display:block;
        text-align:center;
        padding:1.25em;
    }

    #navigation li a:hover{
        background:#609941;
        text-decoration:underline;
    }

I'm using the 960 gridsystem as well.

Upvotes: 0

Views: 72

Answers (2)

Octopus
Octopus

Reputation: 8325

You ought to be using the development tools that are built into browsers these days. Firefox and Chrome both have features that can be accessed by pressing F11. There is also Firebug for firefox.

Any of these will go into an 'inspect elements' mode where you can hover over your page and identify where your elements sit and exactly how big they are, even when they are filled with whitespace.

These tools also let you experimentally edit css directly in situ, so you can find a better way to style the elements the way you intended them to work.

Also Chris Pederick's Web Developer Toolbar has proven to be a useful development tool.

Upvotes: 1

Albzi
Albzi

Reputation: 15609

Example

It is #loginHolder

You can either take away width:20px; or give it a margin-right:20px; and it will go.

Upvotes: 4

Related Questions