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!

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 Style the Image Captions

Posted by YAWEI SONG
YAWEI SONG
9,168 Points

why do the "footer" float?

The twitter and facebook icons belong to "footer", while the images belong to "ul( being set be by 'float' )". They are separative. why do the icons float to the right side?

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,247 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,247 Points

Once you put a float on an element it takes the element out of "normal document flow". So preceding elements will shift into the available space left where that element would otherwise be. To fix it, you need to clear the floats by putting a "clearfix" on that element.

.clearfix {
  content: "";
  display: table;
  clear:both
}

This is an example of a clearfix. It attaches itself to any HTML element that has a class of "clearfix" and will put that element back into normal flow.

Hope this helps!