All the DIVs with the id 'space' are floated left. They have the same width but, naturally, different heights. You could say floats like this fill out one row at the time, one after the other from left to right. When there isn't room for more boxes the next one goes to the leftmost of the next row. All these DIVs are contained in DIV with the id 'center' that's 558px wide, so there are only room for two boxes in a row. The problem is the boxes have different height and will get stuck on each other. That's why you get the gaps. You have to rethink the layout. It cannot be done with floats if you want them in the order you have now.

A serious error is that an ID is supposed to be unique to a page, i.e. you can have exactly one instance of it on the same page. You should use class instead. As you have it no, some browsers may apply the CSS to only the first (or maybe last) instance of the id.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.