Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Inna Kulbaka
Courses Plus Student 1,411 PointsFooter in position:fixed overlaps the content
I just want it to fix at the bottom of the page the way that if the content is height is bigger that the page itself you have to scroll down till you see the footer
5 Answers
Chris Jardine
13,299 PointsHi Inna
Add to your body and footer:
body {
height:100%;
position: relative;
}
footer {
position: absolute;
bottom: 0;
left: 0;
}
Inna Kulbaka
Courses Plus Student 1,411 PointsDoesn't work :( in that case footer disappears from index and contact and behaves strangely in about page
Chris Jardine
13,299 PointsHi Inna
Can you share the HTML code you have.
Thanks
Inna Kulbaka
Courses Plus Student 1,411 PointsSure!
<head>
<meta charset="utf-8">
<title>Katerina Kolenko | Retoucher</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Lora:700" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<style>
footer p {
color: #fa8072;
}
section ul p {
color: #fa8072;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<header>
<a href="index.html" id="logo">
<h1>Katerina Kolenko</h1>
<h2>Retoucher</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
</div>
<div id="content">
<section>
<ul id="gallery">
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" alt=""><p>Beauty.</p>
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt=""><p>Portrait.</p>
</a>
</li>
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" alt=""><p>Sparkle.</p>
</a>
</li>
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" alt=""><p>Lady in red.</p>
</a>
</li>
<li>
<a href="img/6.jpg">
<img src="img/6.jpg" alt=""><p>For Beauty Studio.</p>
</a>
</li>
<li>
<a href="img/7.jpg">
<img src="img/7.jpg" alt=""><p>For Beauty Studio.</p>
</a>
</li>
</ul>
</section>
</div>
<div id="footer">
<footer>
<a href="http://www.instagram.com/kolenkortch"><img src="img/i1.png" alt="" class="social-icon"></a>
<a href="http://www.facebook.com/kolenko1100"><img src="img/f1.png" alt="" class="social-icon"></a>
<p>© 2017 Katerina Kolenko</p>
</footer>
</div>
</div>
</body>
</html> ```
Chris Jardine
13,299 PointsHi Inna
Make these changes to your css:
html, body {
height: 100%;
position: relative;
}
#wrapper {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
text-align: center;
clear: both;
font-size: 0.5em;
padding-top: 50px;
background-color: #f5f5f5;
width:100%;
}
Inna Kulbaka
Courses Plus Student 1,411 PointsI guess there must be mistake in my html because when I inspect elements I see that body and section don't work properly... Still cannot figure out what exactly causing the problem here's my index
<html>
<head>
<meta charset="utf-8">
<title>Katerina Kolenko | Retoucher</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Lora:700" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<style>
footer p {
color: #fa8072;
}
section ul p {
color: #fa8072;
}
</style>
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Katerina Kolenko</h1>
<h2>Retoucher</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section id="content">
<ul id="gallery">
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" alt=""><p>Beauty.</p>
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt=""><p>Portrait.</p>
</a>
</li>
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" alt=""><p>Sparkle.</p>
</a>
</li>
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" alt=""><p>Lady in red.</p>
</a>
</li>
<li>
<a href="img/6.jpg">
<img src="img/6.jpg" alt=""><p>For Beauty Studio.</p>
</a>
</li>
<li>
<a href="img/7.jpg">
<img src="img/7.jpg" alt=""><p>For Beauty Studio.</p>
</a>
</li>
</ul>
</section>
<div id="footer">
<footer>
<a href="http://www.instagram.com/kolenkortch"><img src="img/i1.png" alt="" class="social-icon"></a>
<a href="http://www.facebook.com/kolenko1100"><img src="img/f1.png" alt="" class="social-icon"></a>
<p>© 2017 Katerina Kolenko</p>
</footer>
</div>
</body>
</html>
about
<html>
<head>
<meta charset="utf-8">
<title>Katerina Kolenko | Retoucher</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Lora:700" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<style>
footer p {
color: #fa8072;
}
section ul p {
color: #fa8072;
}
</style>
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Katerina Kolenko</h1>
<h2>Retoucher</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section id="content">
<img src="img/Photo1.jpg" class="Photo" alt="My photo should be here">
<h3>About</h3>
<p>Bla bla bla, I'm serious retoucher, don't mess with me :)</p>
<p>If you want to write me a message about how cool and majestic I am here's my facebook: <a href="http://www.facebook.com/kolenko1100">Katerina Kolenko</a></p>
</section>
<div id="footer">
<footer>
<a href="http://www.instagram.com/kolenkortch"><img src="img/i1.png" class="social-icon"></a>
<a href="http://www.facebook.com/kolenko1100"><img src="img/f1.png" class="social-icon"></a>
<p>© 2017 Katerina Kolenko</p>
</footer>
</div>
</body>
</html>
contact
<html>
<head>
<meta charset="utf-8">
<title>Katerina Kolenko | Retoucher</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Lora:700" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<style>
footer p {
color: #fa8072;
}
section ul p {
color: #fa8072;
}
</style>
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Katerina Kolenko</h1>
<h2>Retoucher</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="content">
<section id="primary">
<h3>General Information</h3>
<p>I am open for new projects, try me! :D</p>
<p>Don't give me a call unless you really mean it, hey I've got a mail here for all the useless stuff :p</p>
</section>
<section id="secondary">
<h3>Contacts</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:+971-55-891-6973">+971-55-891-6573</a></li>
<li class="mail"><a href="mailto:kolenret@gmail.com">kolenret@gmail.com</a></li>
</ul>
</section>
</div>
<div id="footer">
<footer>
<a href="http://www.instagram.com/kolenkortch"><img src="img/i1.png" class="social-icon"></a>
<a href="http://www.facebook.com/kolenko1100"><img src="img/f1.png" class="social-icon"></a>
<p>© 2017 Katerina Kolenko</p>
</footer>
</div>
</body>
</html>
and css
/***********************************
GENERAL
***********************************/
body {
font-family: 'Bitter', serif;
width: 100%;
margin-bottom: 200px;
padding: 0;
}
#content {
height: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 5%;
}
section p, ul {
margin: 0 0 1em 5%;
}
/***********************************
HEADING
***********************************/
header {
float:left;
width: 100%;
margin: 0 0 30px 0;
padding: 5px 0 0 0
}
#logo {
background-color: #fa8072;
text-align: center;
margin: 0;
}
h1 {
font-family: 'Trocchi', serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
margin: -5px 0 0;
font-size: 0.75em;
font-weight: normal;
}
/***********************************
NAVIGATION
***********************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
width: 100%;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 5px;
padding: 0;
}
nav a {
font-weight: normal;
padding: 10px 10px;
}
/***********************************
FOOTER
***********************************/
#footer {
text-align: center;
clear: both;
font-size: 0.5em;
padding-top: 50px;
background-color: #f5f5f5;
float:left;
width:100%;
}
.social-icon {
width: 25px;
height: 25px;
margin: 0 10px;
}
/***********************************
PAGE: PORTFOLIO
***********************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
width: 45%;
margin: 2.5%;
float: left;
background-color: #f5f5f5;
color: #fa8072;
}
/***********************************
PAGE:ABOUT
***********************************/
.Photo {
clear:both;
max-width: 200px;
display: block;
margin: 0 auto 30px;
border-radius: 100%;
}
/***********************************
PAGE:CONTACT
***********************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px 5%;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
/***********************************
COLOURS
***********************************/
/*header salmon colour*/
header {
background: #fa8072;
border-color: #ffa394;
}
/*headlines white*/
h1, h2 {
color: #fff;
}
/*navigation orange and white*/
nav {
background: #ffa394;
}
nav a {
color: #fff;
}
nav a.selected, nav a:hover {
color: #b5192c;
}
body {
background-color: #f5f5f5;
color: #fa8072;
}
#content{
background-color: white;
}
Chris Jardine
13,299 PointsHi Inna if you added the CSS codes to your CSS document it should keep your footer at the bottom of the webpage when there isn't much content.
Inna Kulbaka
Courses Plus Student 1,411 PointsInna Kulbaka
Courses Plus Student 1,411 Points