CODEWITHSUNDEEP
htmlcss
Bailee
Bailee

Reputation: 65

Footer is overextending

I need some help with my footer, its overextending horizontally, I've set the width to 100% so it should, in theory, be the size of the page. Any help would be much appreciated.

HTML

<footer>
<p>Mandurah Jetty Maintenance | Copyright &copy 2017</p>
</footer>

CSS

footer{
padding: 20px;
color: #ffffff;
background-color: #333;
text-align: center;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;


}

Upvotes: 0

Views: 121

Answers (2)

frnt
frnt

Reputation: 8795

Add box-sizing:border-box; When adding padding or border properties to an element it by default increase the width and height of that element. So by adding box-sizing:border-box this stops that increment on following div still keeping the state of assigned padding and border.

The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.

footer{
padding: 20px;
color: #ffffff;
background-color: #333;
text-align: center;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
box-sizing:border-box; /*Add this*/
}
<footer>
<p>Mandurah Jetty Maintenance | Copyright &copy 2017</p>
</footer>

Upvotes: 2

Xander
Xander

Reputation: 1011

If you mean the footer isn't reaching the far left/right of the page then change your css to this:

footer {
padding: 20px, 0px, 0px, 0px; //Top, right, bottom, left
color: #ffffff;
background-color: #333;
text-align: center;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
}

Upvotes: 1

Related Questions