Full-sized columns with floated content?

Question

Hello folks. My site is up here:

Green McP

I'm trying to put my old WP powered site into Expression Engine (just for giggles), and I'm stuck with my project layout: I want a grid of my projects, each a div with a set height/width. If I don't float them left, they just stack vertically. If I do float them left, they arrange themselves as I want, but the #column in the background loses its height and thus the BG. It's possible to make it bigger with min-height: 700px, but that won't work in IE as I'm told. What's another way to get things into grids (w/o tables, preferably).

Thanks!

Answer 1

You just need to clear the floats.

You can add overflow: hidden; to the #column container.

For more information and details about 'clearfix' check out: http://www.webtoolkit.info/css-clearfix.html

Answer 2

You'll have to do one of these:

• Make #column float left as well; or
• Set overflow: auto to #column