Size of Footer

Hi James,

The red background is actually going to extend all the way to the top of the header but you don't see it because the header is on top in the layering order.

The reason for this is because the previous elements are floated and so the content box for the footer will extend all the way to the top.

Before you clear the footer, try giving it a top margin of say 30px to test this out. You will see that this produces a 30px gap above the header.

By clearing the floats in the footer, you're saying that the footer element must drop below all previously floated elements. This forces the content box to drop below the gallery items and then the footer takes on it's natural height that it should be and the size of the red background that you have will seem reasonable.

This same problem happens between the floated header and the wrapper div that follows. You should add a clear: both to your wrapper div as well so that it's content box will drop below the floated header.

What determines the size of an element in general is it's content, assuming you have not forced an element to be a certain width or height.

Generally height will be based on how tall the content is. Width depends on whether it's a block level or inline element. An inline element is only as wide as it needs to be to contain the content. Whereas a block level element will take up the full width of it's parent even if it's content doesn't require it.

Let me know if anything needs to be clarified.