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 PointsI have a couple of questions about my footer. Includes code pen link.
I've been making websites with notepad++ When I preview the page in notepad++ the text in the footer is centered perfect but, in code pen the text is off to the right. When I move the image tag further up in the paragraph, the text aligns perfectly. It's like the image tag is bleeding into the footer. The image I'm talking about is the .lap-top image. Is there a way to fix this without moving the image up further in the paragraph?
My next question is when I minimize the browser all the way like in a mobile phone, like Nick does in, "How to make a website" you can see white at the very bottom of the footer in the browser window, I'm wondering if this is also normal again it's at the very bottom. If it means anything I'm using Internet Explorer. Can someone help me with these two issues please? Thanks in advance for the help. Code Pen is below: http://codepen.io/mike316/pen/Kzdbu
2 Answers
Ana Gledovic
7,465 PointsOk Mr. X I've been playing with your code a little bit :)
About the image and centering footer: you have to clear floats and it will not bleed into the footer. You could do that giving overflow: hidden; to img's parent element(.main-content p). That will also perfectly center your text in footer.
White at the bottom is because you set height of 80px, and it is not enough space when you resize the window. Instead, you should set min-height: 80px; and that will fix the problem.
Best, Ana
mrx3
8,742 PointsThank you Anna, much appreciated. Would it be okay to set the overflow to auto? Just curious.
Ana Gledovic
7,465 PointsYea, sure! That works fine too. There are several different ways for solving a problem, you just have to find what works for your specific situation. That's the beauty and craziness of CSS :)
Keep on rockin'
mrx3
8,742 PointsThank you for the help. I did try something else that worked before you posted your first response. I sometimes get worried that the choice I pick, even though it works isn't the right one, and it makes me nervous. Thank you again for your help.
mrx3
8,742 Pointsmrx3
8,742 PointsUPDATE: I did run the code pen in Chrome, Chrome shows the outline/border of the image. The border of the image goes down inside the footer, so the border of the image is pushing the text to the right. I did a google search and found a possible solution, I changed my margins in to 0 for all sides in my header, I also added a float left in my .main-content class, and finally I added a clear left in my footer. Not sure if this is a real solution though, what do you think? It centered the footer text and took care of it.