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 trialJoshua Lyons
511 PointsFooter Background color fills the screen.
When I float the ul items it allows my footer background color to fill the screen.
4 Answers
Mark Truitt
17,230 PointsCan you provide an example of your code? Normally this happens when it breaks the container in some fashion.
Joshua Lyons
511 Points/************************ General ************************/
body { font-family: Ailerons; color: #6ab47b;
}
a { text-decoration: none; color: #6ab47b; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5.5%; font-size: 2.0em; }
img { max-width: 100%; }
/************************ Heading ************************/
logo {
text-align: center; margin: 0; }
h1 { float: center; font-size: 2.4em; margin: 0 15px; padding-top: 10px; }
h2 { font-size: 1.2em; margin: -9px 0; }
h1, h2 { text-align: center; font-weight: normal; }
header { background: #000; border-color: #599a68; }
nav ul { font-size: 1.3em; text-align: center; list-style-type: none; padding-bottom: 10px; padding-left: 0; padding-top: 20px; }
nav a:hover { color: #fff }
/************************ Colors ************************/
/************************ Footer ************************/
footer { background: #000; padding-bottom: 0;
text-align: center;
}
footer img { padding-top: 25px; }
footer p {
padding-left: 0; padding-bottom: 34px; margin: 0 0; }
/************************ Page: Portfolio ************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mr. Ryan Lyons|Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Mr. Ryan Lyons</h1>
<h2>designer</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 id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="bitch">
</a>
<p>Experimentation with color and texture.</p>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
</a>
<p>Playing with blending modes in photoshop.</p>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
</a>
<p>Trying to create 80's glow.</p>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
</a>
<p>Photoshop drips.</p>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
</a>
<p>Repitition shapes.</p>
</li>
</ul>
</section>
</div>
<footer>
<a href="https://www.facebook.com/bigrojolyons">
<img src="img/bllogo.jpg" alt="">
</a>
<p>© 2017 Joshua Lyons.</p>
</footer>
</body> </html>
Joshua Lyons
511 Pointsdid that help?
Joshua Lyons
511 Pointsi ended up using overflow: auto in the div id="wrapper"
Mark Truitt
17,230 PointsMark Truitt
17,230 PointsThis is a common issue with floats. You need to clear them after.
A lot of people make a clear or clearfix class and either attach in a empty div. You could also attach clear: both to the footer to fix this as well.
Mark Truitt
17,230 PointsMark Truitt
17,230 PointsYou will want to take a look into using clear for floats. This can cause problems later on down the road.
https://developer.mozilla.org/en-US/docs/Web/CSS/clear
Joshua Lyons
511 PointsJoshua Lyons
511 Pointsawesome! That's very helpful! thank you.