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

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!

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.