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 trialAaron Selonke
10,323 PointsMy footer elements are floating to the right of the last image in the gallery;
I just put it up on code-pen:
http://codepen.io/Aarondv1/pen/GpPYeE
The images are not there, but you can see whats going on.
My footer elements are floating to the right of the last image in the gallery;
Also
When the browser is narrow, the nav (portfolio, about, and contact) move out of the inline formation, and will stack with the 'contact' element, moving to the next row underneath...
4 Answers
Hanley Chan
27,771 PointsHi,
You could set the clear property on your footer element.
footer {
clear: left;
}
Shaun Earley
20,412 PointsYou need to clear your floats.
Unsubscribed User
8,841 PointsHi,
add the property clear:both for the footer element which will resolve the issue.
Clear Poperty specifies - No floating elements allowed on the left or the right side of a specified <p> element:
footer {
clear:both;
}
edeharrison
Full Stack JavaScript Techdegree Student 11,127 PointsHi Aaron,
Another option for the footer issue - which I've got into the habit of doing with each project - is to create a div with the class of "clear", and mark your css like so:
.clear {
clear: both;
}
Then, anywhere you use floats in your page, put this class after the last floated element. So in your example it'd go after your closing "ul" tag:
</ul>
<div class="clear"></div>
</section>
This will have the same effect as the solutions mentioned above. Just a preference thing.
Your second issue - your nav elements pushing over into two lines on smaller screens - is because the width of the combination of these elements (in this case the three "li" elements) is exceeding the small browser width. Therefore they break up onto multiple lines. Bear in mind, that is the width of the actual text in the "li" tags, plus the padding and the margin that you've set around them. So, if you want them to remain on one line, you should decrease this overall width, either by:
- Decreasing the font size of the "li" elements
- Decreasing the margin and/or padding around the "li" elements
Another common option is to use media queries, which is tied up with responsive design. That is, to set certain CSS styles on larger browsers, and other CSS styles for smaller browsers.
Hope that helps,
Ede