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
Vertical Scroll Rendering Issue in Flexbox in Firefox
How to Construct a Table Header Than Spans Multiple Rows in HTML
Balanced Text Wrapping in HTML
How to Apply a CSS Style to an Element Name
How to Calc() The Number of Rows in a Grid Template
Controlling Spacing Between Table Cells
How to Change Text Selection Color in UIwebview iOS
Flexbox Not Working in Internet Explorer 11
How to Use Text-Overflow Ellipsis in an HTML Input Field
How to Serve HTML Files in Nginx Without Showing The Extension in This Alias Setup
How to Style The Browser's Autocomplete Dropdown Box
What's The Difference Between Meta Name and Meta Property
How to Auto Resize HTML Table Cell to Fit The Text Size