DevOffline
Reputation: 67
How do I keep my footer off of my content?
I was trying to make a gallery website for my dad's business and I came across a problem. My images were being cut off by my footer. Here is an example of my code.
<head>
<!--Start of FONTS-->
<link href="https://fonts.googleapis.com/css2?family=DM+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Mukta&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">
<!--End of FONTS-->
</head>
<header>
</header
<body>
<div id="page-container">
<div id="content-wrap">
<!--Page Content-->
<center>
<h1>The Balloonatic's Balloons!</h1>
</center>
<!--Start of Gallery-->
<img src="https://static.wixstatic.com/media/92ee09_33917459124548d397fef56096891dbc.jpg/v1/fill/w_519,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_33917459124548d397fef56096891dbc.webp" alt="Joe's Son in an elephant mask made out of latex balloons." height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_25e030786c9947e78d44a687bfc0b2e7.jpg/v1/fill/w_367,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_25e030786c9947e78d44a687bfc0b2e7.webp" alt="Photo of a balloon dress that is mostly green but has a black patter on it. This balloon dress also has a green lace that would go around the neck." height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_5b51aaac5eb043659f8791e466823787.jpg/v1/fill/w_393,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_5b51aaac5eb043659f8791e466823787.webp" alt="Photo of a demonic mask made out of balloons.Yellow eyes and red face." height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_b8ad33393aaf4191a1be710697e929bc.jpg/v1/fill/w_491,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_b8ad33393aaf4191a1be710697e929bc.webp" alt="3 Photos of Hayden Lansinger at age 6 or 7 holding a balloon crossbow." height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_79587a1f798a488dbbc6b23bde2ec615.jpg/v1/fill/w_368,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_79587a1f798a488dbbc6b23bde2ec615.webp" alt="A balloon dragon. Black with green eyes." height="420" width="420" style="text-align: center">
<img src="https://static.wixstatic.com/media/92ee09_d71175118d024b78a531058ad0ecd60f.jpg/v1/fill/w_367,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_d71175118d024b78a531058ad0ecd60f.webp" alt="A balloon race car, green and black." height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_38e56d6a8b4245e3a6def25ad3d0dfc8.jpg/v1/fill/w_657,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_38e56d6a8b4245e3a6def25ad3d0dfc8.webp" alt="An abominable snowman made out of balloons." height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_ea62749742d3443a8be115586e0d0c9e.jpg/v1/fill/w_368,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_ea62749742d3443a8be115586e0d0c9e.webp" alt="A photo of Chloe Lansinger in a balloon dress." height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_965444c3c8ab4b25a0743db871c867f0.jpg/v1/fill/w_489,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_965444c3c8ab4b25a0743db871c867f0.webp" alt="A picture of Balloosions Dressez." height="420" width="420" class="row">
<!--End of Gallery-->
</div>
<div id="footer">
<a href="https://twitter.com/balloosions" target="_blank">
<img src="https://static.wixstatic.com/media/01113281ebb7dfb57a8dc2a02eb1cb92.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01/01113281ebb7dfb57a8dc2a02eb1cb92.webp" alt="Twitter Button" style="opacity: 1.0" id="foot-twitter">
</a>
<a href="https://facebook.com/balloosions" target="_blank">
<img src="https://static.wixstatic.com/media/b1cd13f9d4dfb1450bbb325285106177.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01/b1cd13f9d4dfb1450bbb325285106177.webp" alt="Facebook Button" style="opacity: 1.0" id="foot-facebook">
</a>
<footer id="copyright">© 2020 Balloosions</footer>
<footer id="dev-note">Developed and Designed by Hayden Lansinger</footer>
</div>
</div>
</body>
And now CSS
h1 {
font-family: "Balsamiq Sans";
font-weight: 100;
}
/*Start of IMG*/
img:hover {
opacity: 1.0;
}
img {
opacity: 0.17;
}
.row {
position: relative;
left: 3%;
}
/*End of IMG*/
/*Start of FOOTER CSS*/
#dev-note {
padding-bottom: 3em;
}
#foot-twitter {
position: relative;
right: 0.5%;
}
#foot-facebook {
position: relative;
left: 0.5%;
}
/*End of FOOTER CSS*/
/*Start of MAIN CSS*/
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 5rem; /* Footer height */
background-color: #00bfff;
margin: 0;
text-align: center;
padding-top: 2em;
padding-bottom: 2em;
font-size: 12px;
font-family: Mukta;
}
body {
background-color: white;
color: black;
font-family: ;
}
/*End of MAIN CSS*/
Please help me with this.
You can also view this via my Codepen if that is easier.
But if you guys know what can help me with this, please do. I am looking for any answer. I am also kind of new to coding so I don't know what to do. Just trying to get enough words in here so that I can submit it.
Upvotes: 0
Views: 433
Answers (3)
Mithun raj
Reputation: 194
Change the position property of your footer to relative. That would set the footer at the bottom of the page and not in the bottom of its parent.
Upvotes: 1
ssomename
Reputation: 545
I went through your code and was able to add a gap between the footer and your content wrapper by just increasing the padding-bottom attribute of the content-wrap div like so :
#content-wrap {
padding-bottom: 10.5rem; /* Footer height */
}
Upvotes: 0
Gerard
Reputation: 15786
Remove postion:absolute and bottom:0 from the footer.
In addition, <center></center> is no longer allowed and <header></header> should be positioned after <body>
h1 {
font-family: "Balsamiq Sans";
font-weight: 100;
}
/*Start of IMG*/
img:hover {
opacity: 1.0;
}
img {
opacity: 0.17;
}
.row {
position: relative;
left: 3%;
}
/*End of IMG*/
/*Start of FOOTER CSS*/
#dev-note {
padding-bottom: 3em;
}
#foot-twitter {
position: relative;
right: 0.5%;
}
#foot-facebook {
position: relative;
left: 0.5%;
}
/*End of FOOTER CSS*/
/*Start of MAIN CSS*/
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem;
/* Footer height */
}
#footer {
width: 100%;
height: 5rem;
/* Footer height */
background-color: #00bfff;
margin: 0;
text-align: center;
padding-top: 2em;
padding-bottom: 2em;
font-size: 12px;
font-family: Mukta;
}
body {
background-color: white;
color: black;
font-family: ;
}<div id="page-container">
<div id="content-wrap">
<!--Page Content-->
<center>
<h1>The Balloonatic's Balloons!</h1>
</center>
<!--Start of Gallery-->
<img src="https://static.wixstatic.com/media/92ee09_33917459124548d397fef56096891dbc.jpg/v1/fill/w_519,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_33917459124548d397fef56096891dbc.webp" alt="Joe's Son in an elephant mask made out of latex balloons." height="420"
width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_25e030786c9947e78d44a687bfc0b2e7.jpg/v1/fill/w_367,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_25e030786c9947e78d44a687bfc0b2e7.webp" alt="Photo of a balloon dress that is mostly green but has a black patter on it. This balloon dress also has a green lace that would go around the neck."
height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_5b51aaac5eb043659f8791e466823787.jpg/v1/fill/w_393,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_5b51aaac5eb043659f8791e466823787.webp" alt="Photo of a demonic mask made out of balloons.Yellow eyes and red face."
height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_b8ad33393aaf4191a1be710697e929bc.jpg/v1/fill/w_491,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_b8ad33393aaf4191a1be710697e929bc.webp" alt="3 Photos of Hayden Lansinger at age 6 or 7 holding a balloon crossbow."
height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_79587a1f798a488dbbc6b23bde2ec615.jpg/v1/fill/w_368,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_79587a1f798a488dbbc6b23bde2ec615.webp" alt="A balloon dragon. Black with green eyes." height="420" width="420"
style="text-align: center">
<img src="https://static.wixstatic.com/media/92ee09_d71175118d024b78a531058ad0ecd60f.jpg/v1/fill/w_367,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_d71175118d024b78a531058ad0ecd60f.webp" alt="A balloon race car, green and black." height="420" width="420"
class="row">
<img src="https://static.wixstatic.com/media/92ee09_38e56d6a8b4245e3a6def25ad3d0dfc8.jpg/v1/fill/w_657,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_38e56d6a8b4245e3a6def25ad3d0dfc8.webp" alt="An abominable snowman made out of balloons." height="420" width="420"
class="row">
<img src="https://static.wixstatic.com/media/92ee09_ea62749742d3443a8be115586e0d0c9e.jpg/v1/fill/w_368,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_ea62749742d3443a8be115586e0d0c9e.webp" alt="A photo of Chloe Lansinger in a balloon dress." height="420" width="420"
class="row">
<img src="https://static.wixstatic.com/media/92ee09_965444c3c8ab4b25a0743db871c867f0.jpg/v1/fill/w_489,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_965444c3c8ab4b25a0743db871c867f0.webp" alt="A picture of Balloosions Dressez." height="420" width="420" class="row">
<!--End of Gallery-->
</div>
<div id="footer">
<a href="https://twitter.com/balloosions" target="_blank">
<img src="https://static.wixstatic.com/media/01113281ebb7dfb57a8dc2a02eb1cb92.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01/01113281ebb7dfb57a8dc2a02eb1cb92.webp" alt="Twitter Button" style="opacity: 1.0" id="foot-twitter">
</a>
<a href="https://facebook.com/balloosions" target="_blank">
<img src="https://static.wixstatic.com/media/b1cd13f9d4dfb1450bbb325285106177.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01/b1cd13f9d4dfb1450bbb325285106177.webp" alt="Facebook Button" style="opacity: 1.0" id="foot-facebook">
</a>
<footer id="copyright">© 2020 Balloosions</footer>
<footer id="dev-note">Developed and Designed by Hayden Lansinger</footer>
</div>
</div>Upvotes: 0
Related Questions
- Why is my footer element covering page content?
- HTML footer overlapping with content
- How do I keep my footer div from overlapping with my page content?
- CSS footer overlapping my content
- Stop footer overlapping the content
- Footer is covering my content
- How to stop content from overlapping the footer?
- how to stick a footer without covering the content?
- Footer gets cut off?
- css footer cutting in the sides