CODEWITHSUNDEEP
css
user2135867
user2135867

Reputation:

css with horizontal scrollbar

i have this CSS in my main style sheet is it possible to remove the horizontal scroll bar from this CSS:

html, body, #wrap {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-family:Calibri;
}
#wrap {
    height: auto;
    min-height: 100%;
}

/* header stuff */
#header-topbar {
    width:100%;
    height:30px;
    padding:10px 10px 10px 10px;
    background-color:#666666;
}
#header-topbar2 {
    width:100%;
    height:80px;
    padding:10px 10px 10px 10px;
    background-color:#eeeeee;
}
#phone-tel {
    position:block;
    float:right;
    margin-right:16%;
    margin-top:5px;
    font-size:20px;
}
#logo {
    position:absolute;
    float:left;
    margin-left:15%;
    margin-top:0px;
}

/* main body/content */
#body-content {
    padding-bottom:200px;
    width:70%;
    margin:120px auto 0 auto;
    padding:10px 10px 10px 10px;
    border:solid 1px #a79494;
    border-top:solid 4px #a2cd3a;
}

/*footer */
#footer .column {
    margin-top:-200px;
    clear:both;
    float: left;
    width: 25%;
}

#footer .column div {
    margin: 5px;
    height: 200px;
    background: #eeeeee;
}

i have tried adding the width:100% to the body,html and also padding:0 and margin:0 but still not working

Upvotes: 1

Views: 817

Answers (3)

This_is_me
This_is_me

Reputation: 918

Dirty fix

  html, body, #wrap {
    overflow-x:hidden;
    }

jsFiddle example

Upvotes: 0

Kiirani
Kiirani

Reputation: 1080

Snipping out a large portion of code, your problem combination is things like this:

#header-topbar {
    width:100%;
    padding:10px 10px 10px 10px;
}

The CSS Box model defines width as the width of the content, with margins and padding added in addition around the content.

The result of this is the total space taken up by your headers is 100% + 20px, which will always be wider than the screen.

As noted in the comments below, block level items will automatically take up the full width of their parents, so removing the width:100%; here, and leaving in the padding, may be a valid option.

There are cases where you specifically want a percentage width, particularly with floats (I often do this with fluid with, multiple column layouts).

My standard solution to the padding problem when a percentage width is required looks a little bit like this:

width: 95%
padding-left:2.5%;
padding-right:2.5%;

Notice that we're specifying the padding and the width in the same units, and the total sum is 100% (95 + 2.5 + 2.5 = 100)

Upvotes: 1

ryanbrill
ryanbrill

Reputation: 2011

The problem is that you're setting the width of your elements to 100%, and then adding on to that by setting padding. You could set the box-sizing to border-box for these elements, which will cause the padding to go inside the width (but doesn't work in IE7) or, you could add an element inside these elements that you then set the padding on.

* {
    box-sizing: border-box;
}

http://jsfiddle.net/ryanbrill/mxk4T/

For browser support of box-sizing, see http://caniuse.com/#search=box-sizing

Upvotes: 1

Related Questions