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

HTML How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Aaron Selonke
Aaron Selonke
10,323 Points

My 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
Hanley Chan
27,771 Points

Hi,

You could set the clear property on your footer element.

footer {
clear: left;
}

You need to clear your floats.

Hi,

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;
}

Hi 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