Question

I’m encountering some difficulty with some CSS I’m coding.

Whenever I minimise the window a horizontal scrollbar appears and the problem with this scrollbar is that it doesn’t go away even when I maximise the window.

What could I be doing wrong?

Thanks in advance

CSS

body {
    background-color: #C5C5C5;
    margin-left: 0px;
    margin-top: 0px;
}

html {
    overflow-y: scroll;
}

.header_bg {
    background-color: #F1F1EE;
    padding: 10px 10px 10px 10px;
    border-top: 2px solid #738ebe;
    width: 100%;
}

.header_main {
    width: 960px; // would it be better to change this to width: 80%
    margin:0 auto;
    overflow: hidden;
}

.header_main img {
    float: left;
}

.header_main div {
    float: right;
}

HTML

<div class="header_bg">
    <div class="header_main">
        <img src="resources/img/login_logo.png" width="163" height="66" />
        <div>Already a member? Sign in</div>
    </div>
</div>​

Answer 1

This:

.header_bg {
    background-color: #F1F1EE;
    padding: 10px 10px 10px 10px;
    border-top: 2px solid #738ebe;
    width: 100%;
}

Is adding to the calculated width of it’s container, ie, body, which header_bg is stretching to fit 100%, so the padding is shifting bodys dimensions beyond the viewport, thus triggering scroll-x.

Remove it and your scroll bar goes away:

padding: 10px 0;

Edit: http://jsfiddle.net/userdude/782fc/2/

Full: http://jsfiddle.net/userdude/782fc/2/embedded/result

Or, alternatively, put the width on the body with margin: 0 auto; so it auto-centers:

body {
    background-color: #C5C5C5;
    width: 1024px;
    margin: 0 auto;
}

...

.header_bg {
    background-color: #F1F1EE;
    padding: 10px;
    border-top: 2px solid #738ebe;
    width: 100%;
}

.header_main {
    width: 100%;
    margin:0 auto;
    overflow: hidden;
}

Edit: http://jsfiddle.net/userdude/782fc/4/

Full: http://jsfiddle.net/userdude/782fc/4/embedded/result/