Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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 90,705 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,705 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!