StratHaxxs StratHaxxs - 5 months ago 14
CSS Question

CSS Footer 100% width adds a scrollbar

The footer on this page: https://jsfiddle.net/strathaxxs/bbhr1j38/ does not work and I've tried many things, please help me. Here's the code:

<title>Homepage</title>
<style>
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: Roboto;
min-height: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
}
</style>


<div id="header">
<h1>bla bla bla </h1>
</div>

<div id="nav">
bla <br>
bla bla <br>
bla
</div>

<div id="section">
<h2>bla bla </h2>
<p>bla bla bla bla bla bla bla bla bla </p>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>

<div id="footer">
Copyright &copy; StratHaxxs.org
</div>


All it does is is add a scrollbar. I have had this problem ever seince i've started making websites

Answer

Try this:

#footer {
    ...
    padding:5px 0; /* Remove the horizontal padding, keep the vertical padding */
    width: 100%;
    ...
}

Basically having these two propoerties set on the same element made the width 100% of the viewport plus 5 pixels on either side (100% + 10px). The extra 10px made the scrollbar appear.

Comments