Geek Answers Handbook

CSS footer width: 100% causes horizontal scrolling

Am I having trouble providing a footer of 100% width due to which a horizontal scroll can see anything? When I lower 100%, it makes an orange bar on the side, because the background, I read that having a pad on the element can cause it, but I'm sure there are no additions to the contents of my bar footer, can anyone help?

/* CSS Document */

/*-- RESET | Based on Eric Meyer --*/

ol, ul {
    list-style: none;
    padding:0px;
}

li {
    line-height:25px;   
}
/*-- BODY BORDER --*/
.bt, .br, .bb, .bl { 
    background: white; position: fixed; z-index: 99999; 
}
.bl, .br {
    top: 0; bottom: 0; width: 5px; 
}
.bt, .bb {
    left: 0; right: 0; height: 5px; 
}
.bt { 
    top: 0; 
}
.br { 
    right: 0; 
}
.bb { 
    bottom: 0; 
}
.bl { 
    left: 0;
}


/*-- MAIN --*/
html, body { 
    height: 100%; 
}
body {
    text-transform: uppercase;
    background: #FCD9CA; 
}

.clear { 
    clear: both; overflow: hidden; 
}

.sidebar {
    padding: 15px 0;
    border-top: 1px solid black;
    border-bottom: 1px solid black; 
}

.sb-slider {

    padding-top:0px;
    margin-top:0px; 
}
.container {
    padding-bottom:100px;   
}


.logo {
    padding-left:15%;
    position:relative;
    top:125px;
    margin: 0 auto; 
}

.top {
    padding-left:5%;
    position:relative;
    top:200px;
    margin: 0 auto;
}

.footercontact {
    padding: 15px 0;
}
.footer {
    padding-left:5% 
}
footer {

    border-top: 1px solid black;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    background:#fff;
}

I made a fiddle to show you the problem http://jsfiddle.net/9gh3ht48/2/

+4
source share
5 answers

As @Lal mentioned, the problem is caused by left padding on .footer.

, , box-sizing border-box:

.footer {
    padding-left:5% 
    box-sizing: border-box;
}

DEMO

Edit

:

DEMO

.footer {
   padding-left:5%;
   margin: 0;
}
+7

100% : 0; .

, : 0, , , .

( , IE8)

+4

fiddle

padding-left:5%

.footer {
    padding-left:5% 
}

15% , 85%. 100%, .

, , 15% 85%.

+3
source

I added:

display: inline;

in .footer and it fixed the problem, although you will need to change the add-on.

0
source

Add 100% width to class footer: .footer. This will solve your problem.

 .footer {
    padding-left: 5%;
    box-sizing: border-box;
    width: 100%;
    }
0
source

More articles:


All Articles