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
mrx3
8,742 PointsHaving some trouble making the page extend all the way.
The footer doesn't go all the way to the bottom of my page. I've tried to set the html, body, and wrapper to 100% but, it doesn't seem to be working. I have had this problem before, and the above usually works but not this time. Could some check over my html, css, and give me some help. Thanks in advance. Below is my HTML and CSS, for some reason the markdown is only appearing for me when I add it separate from the question. Sorry.
mrx3
8,742 Points/*************************
Setting the box size rule
**************************/
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*******************************
Adding a background to the body
********************************/
body {
background: #000;
line-height: 2em;
}
/**********************
Centering the .wrapper
***********************/
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/***************************
Styling the header section
****************************/
h1 {
background: #DCDCDC;
margin: 0;
padding: 25px;
text-align: center;
}
/***********************
Styling the navigation
************************/
.nav {
background: #A9A9A9;
font-size: 1.1em;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav a {
display: inline-block;
padding: 12px;
text-decoration: none;
}
/**************************************
Styling the navigation pseudo elements
***************************************/
.nav a:link {
color: #000;
}
.nav a:visited {
color: #800080;
}
.nav a:hover {
color: #fff;
}
.nav a:active {
color: #0000FF;
}
/*************************
Styling the h3 header
**************************/
h3 {
margin: 0;
padding: 15px;
text-align: center;
}
/**************************
Applying the clearfix hack
***************************/
.group:after {
content: "";
display: table;
clear: both;
}
/*********************************
Styling the .main-content section
**********************************/
.main-content {
background: #D3D3D3;
padding: 15px;
}
/**************************
Styling the gallery/images
***************************/
img {
max-width: 100%;
}
.gallery {
margin: 0;
padding: 0;
list-style: none;
}
.gallery li {
float: left;
width: 45%;
margin: 2.5%;
background: #f5f5f5;
color: #bdc3c7;
}
.gallery li a {
text-align: center;
text-decoration: none;
}
.gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: grey;
}
/**************************
Styling the footer section
***************************/
footer {
background: #DCDCDC;
text-align: center;
}
footer p{
font-size: 1.2em;
font-weight: bold;
margin-top: 0;
padding-top: 15px;
}
/******************************
Styling the social media icons
*******************************/
.social-icon {
width: 50px;
height: 50px;
margin: 0 5px;
}
/***********
About page
***********/
/************************
Styling the second image
on the about page.
*************************/
.gallery-right {
margin: 0;
padding: 0;
list-style: none;
}
.gallery-right li {
float: right;
width: 45%;
margin: 2.5%;
background: #f5f5f5;
color: #bdc3c7;
}
.gallery-right li a {
text-decoration: none;
text-align: center;
}
.gallery-right li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: grey;
}
/********************************
Removing the margin in the
.main-content secondary without
this there will be a white-space
between the first div and the
second div.
**********************************/
.secondary p {
margin: 0;
}
/**************
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 0 10px;
text-decoration: none;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
4 Answers
Gianni Zamora
9,547 PointsI have had that problem before wehn making my websites.Just peep the scenerio - You have the header, content section(middle) and footer. You want the footer to be at the bottom of the page but right now it is probably higher and is reveiling white space on the bottom correct? well to fix this you have to expand you content section (middle) to a certain height of lets say 550px. by your code I say put that sizing to the section class="secondary" and go from there.
Also a tip is to use id's on parent elements and classes for specific elements because the rules of classes will limit you in how you can style your page. Replace that class="secondary" with id="secondary".
Let me know if this works please
mrx3
8,742 PointsAbsolutely.....BRILLANT!!! Thanks Gianni. That's exactly what my problem was, and your suggestion fixed it perfect. I will change my classes to ids like you suggest. Thanks a million again!!
Gianni Zamora
9,547 PointsI have had that problem before wehn making my websites.Just peep the scenerio - You have the header, content section(middle) and footer. You want the footer to be at the bottom of the page but right now it is probably higher and is reveiling white space on the bottom correct? well to fix this you have to expand you content section (middle) to a certain height of lets say 550px. by your code I say put that sizing to the section class="secondary" and go from there.
Also a tip is to use id's on parent elements and classes for specific elements because the rules of classes will limit you in how you can style your page. Replace that class="secondary" with id="secondary".
Let me know if this works please
Darren Kynaston
Courses Plus Student 15,610 PointsLooks to me like your footer is within the <div class="wrapper"> and that div has the css property of
.wrapper {
max-width: 960px;
margin: 0 auto;
}
this will only allow your footer to be a maximum width of 960px.
You can simply move the footer outside of the .wrapper div and then you can give it the width:100% property (if you want it the entire width of the web page that is...
If you've made any of the child elements of the .wrapper width:100%; - they will only be the full width of their parent element (in your case 960px.
Hope that helps.
Darren.
mrx3
8,742 PointsI want the web page to go all the way to the bottom, so the html you're suggesting would do that?
Darren Kynaston
Courses Plus Student 15,610 PointsTake a look at this codePen that I've just put the example in. http://codepen.io/anon/pen/eAEag
Re-size the viewing pane to nearly full width and you will see the problem and answer...
mrx3
8,742 PointsI would like the footer to stretch all the way to the bottom, so there's no "white-space". I see exactly what you're getting at though. Thanks.
mrx3
8,742 Pointshttp://codepen.io/mike316/pen/EBevC
Here's my codepen. See how the footer doesn't go all the way to the bottom, you can see the black back ground. That's what I want to eliminate, and have the footer "stretch all the way to the bottom, so you can 't see the black background.
mrx3
8,742 Pointsmrx3
8,742 Points