Preventing Fixed Footer from Overlapping Content

How to fix a footer overlapping content?

Change this:

#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: relative; //changed to relative from fixed also works if position is not there
font-size: small;
width:100%;
}

Demo

Prevent my Fixed Footer from overlapping content

you need to add height to your footer and then to add padding-bottom: footerHeightpx; to the body element

body {
padding-bottom: footerHeightHere
}

Footer overlaps content at the bottom of the page

Just set the #footer to position: relative; will fix the overlapping issue.

#footer {
width: 100%;
height: 70px;
background-color: greenyellow;
position: relative;
clear: both; }

But you should have a look at the following website which explains how to create a footer that will always stick on the bottom of the page, with large or with small contents. This would be a much better way.

http://www.cssstickyfooter.com/using-sticky-footer-code.html

HTML footer overlapping with content

Not exactly sure of what you want. But if you want to prevent your footer from overlapping your container, you can solve it with these solutions:

Stick footer to bottom of page:

With this solution, the footer will always stick to the bottom of the page (not the window). If you don't have much content the footer will be at the bottom of the window, and if the content expands, the footer will move along.

html,body {  height: 100%;}
body { padding: 0; margin: 0;}
.container { min-height: 100%; height: auto; margin-bottom: -60px; box-sizing: border-box;}
.container:after { display: block; content: ''; height: 60px;}
ul { padding: 0; margin: 0;}
.footer { height: 60px; background: red;}
<div class="container">  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing  software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div class="footer"> <ul class="copy inline text-center"> <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> <li>All Rights Reserved</li> </ul></div>

how to prevent sticky footer from overlapping above content when zooming in

Give #footer a style of overflow: hidden;.

Don't use a fixed width for #footercontent!

Especially not an outrageously high value of 1920px!

Remember that your users will be visiting on all kinds of devices, and may not have their browser window(s) maximized.

When users see the horizontal-scrollbar-of-DOOM™ they will flee the site, post haste.


Update for newer page:

It seemed to be a combination of conflicting width and margin settings; I ended up starting with a clean reset.

Try:

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title> Hightone - Landing Page </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta name="title" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="http://fonts.googleapis.com/css?family=Noble" rel="stylesheet" type= "text/css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="wrapper">
<header id="header"> </header><!-- #header-->
<div id="content">
<div id="logoholderDiv">
<img src="images/logo.png">
</div>
<div id="videoDiv">
<!--<img id = "xboxImg" src = "images/xbox.png" />-->
<iframe src="http://www.youtube.com/embed/Ee0bWAwgCRE" allowfullscreen="">
</iframe>
</div>
</div><!-- #content-->
</div><!-- #wrapper -->
<footer id="footer">
<div id="footercontent">
<a href="http://www.hitone101.com/index.html">ENTER SITE</a>
</div>
</footer><!-- #footer -->
</body></html>


CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
/* font: 12px/18px Arial, Tahoma, Verdana, sans-serif; */
height: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: auto;
min-width: 1000px;
min-height: 100%;
height: auto !important;
height: 100%;
background: url( "images/landing_page_bg.png" );
border: 1px solid blue;
}

/* Header
-----------------------------------------------------------------------------*/
#header {
height: 1px;
}

/* Middle
-----------------------------------------------------------------------------*/
#content {
padding: 0 0 343px;
}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
margin: -343px auto 0;
min-width: 1000px;
height: 343px;
background: url( "images/landing_page_footer.png" )no-repeat;
background-size: 100%;
background-color: black;
}

.selfclear: after {
content: ".";
float: left;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#logoholderDiv {
width: 150px;
height: 142px;
margin-left: auto;
margin-right: auto;
}
#videoDiv {
width: 650px;
height: 551px;
background: url( "images/videobg.png" ) no-repeat;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
#videoDiv > iframe {
width: 650px;
height: 551px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}
#footercontent {
height: 89%;
background: url( "images/footer_logo.png" ) 45.9% no-repeat;
border: 1px solid brown;
padding-top: 20px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#footercontent > a {
padding: 0px 0px 0px 0px;
text-align: center;
text-decoration: none;
color: white;
display: block;
font-size: 50px;
width: 100%;
margin: 10px auto 0px auto;
border: 1px solid;
}

Footer overlapping the content when browser window is shrunk

Use min-height on the box, remove absolute positioning from the bottom and both div's heights will be kept.

When the margin-top: auto is set on a flex column item, it will push it to the bottom of is parent, which you can see on bigger screens.

body {  margin: 0;  display: flex;                  /*  IE bug fix  */}
#box { flex-grow: 1; /* fill body's width */
display: flex; flex-direction: column; align-items: center; min-height: 100vh;}
#top { background-color: red; height: 560px; width: 400px; border: 1px solid black;}
#bottom { margin-top: auto; /* push it to the bottom on big screen */ background-color: green; height: 100px; width: 400px; border: 1px solid black; }
<div id="box">  <div id="top">  </div>  <div id="bottom">  </div></div>

Footer Sticks to bottom of page but overlaps content

You can add margin-bottom to the body.

Add to your CSS

body {
margin-bottom: 30px;
}


Related Topics



Leave a reply



Submit