#main not registering height from internal divs

[tapeter]

I'm trying to tile a 700x2 .gif vertically to form three columns for the content section (#main) of a website I'm developing (www.ynpn.org/austin/testing.html). Each of the columns is filled with a float:left div (#menu, #content, #gutter) of set width and additional divs inside those to control formatting.

It seems that the divs inside of #main aren't registering any height, and consequently, my #main has no height and the background image doesn't show. What is the problem?

I've hacked a solution by shifting my #contact div inside #main after my three columns and offsetting it from the bottom by a negative measurement, but this isn't rendered well enough when the content doesn't at least meet my min-height setting. (Note, I'm fairly certain this is not a min-height issue.)

I'm testing my sites in Safari and Firefox, but it seems like such a basic problem that it wouldn't be a browser bug.

Any insight whatsoever would be greatly appreciated!

-Tim
Austin, TX

[phoenixshade]

This happens because floats are outside of the normal flow. Hence, the parent div's height does not expand to enclose the floated divs. I know of two ways to solve this:

1) After the three floats, put a non-floated <div style="width:100%"> inside of #main.

2) Style #main with overflow:auto.

I've used both techniques before; lately I've been favoring method #2 since it doesn't depend on an empty div.

[_Aerospace_Eng_]

This happens because floats are outside of the normal flow. Hence, the parent div's height does not expand to enclose the floated divs. I know of two ways to solve this:

1) After the three floats, put a non-floated <div style="width:100%"> inside of #main.

2) Style #main with overflow:auto.

I've used both techniques before; lately I've been favoring method #2 since it doesn't depend on an empty div.
1) Isn't going to work. You need to actually clear the floats. You can use an empty div with style="clear:both;" or you can use the method found here http://www.positioniseverything.net/easyclearing.html