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.

CSS How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Why does 'float: left' affect footer when I've only applied it to <ul id="gallery">?

preview

Here's the CSS

css

HTML

html

4 Answers

Edwin Goddard
Edwin Goddard
8,988 Points

The gallery is being floated, this means that what ever comes after will wrap round it.

If you imagine that the gallery is just one large image and the footer is just a paragraph of text. Then it should make more sense.

So that the footer isn't effected it has be told to clear the elements on it's left. This is what will bring it down onto a new line.

Ah, I see. That makes more sense now, thank you!

John Coffin
John Coffin
10,359 Points

I had trouble with this too.

The idea of the float is that it "floats" in the middle of the page and stuff "flows" around it. The easiest example for most of us is text flowing around an image that is floating in the middle of a page (see All About Floats for some good examples and a better explanation.

It therefore doesn't matter what you applied the float to. All the rest of the content is going to float around it. You therefore need to clear the float property when you get to the end.

footer: {
  clear: both;
}

Something like that.

Yes I was wondering why it was called 'float' instead of something like 'column', but it does make sense now. Thanks for clarifying John.