[thelist] CSS Woes

[Jay Blanchard]

Good evening,

I have a basic CSS layout with a left hand navigation column and a right
hand content column. Within the content column I am nesting some div's
so that I do not have to use tables at all (plus I can make the div's
visible or invisible based on a user's choice). Several of the nested
div's float within a larger div.

All appears well in IE6, but in FF2, not so much. The nested div's
appear below the main left navigation div instead of at the top of the
right content div. I have been searching for hours trying to find a fix
and have tried several hopefuls, but to no avail. Here is what is should
look like;

-----------------------------------------------------------
|   nav  | container0                                     |
|        |------------------------------------------------|
|        | float  | float  | float  |                     |
|        |spacer------------------------------------------|
|        | float  | float  | float  |                     |
|        |spacer------------------------------------------|
|        |                                                |
|--------|------------------------------------------------|

I feel as if I am missing one little thing to make this work in FF, here
is the CSS;

#container0 div {
	border: 1px dashed #333;
	background-color: #ffe;
	vertical-align: top;
	width: 97%;
	padding: 0;
	margin: 0;
}
div.spacer {
    	height: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 1px;
	display: block;
	visibility: hidden;
	clear: both;
}
div.float {
	float: left;
	font-size: 1em;
}

I very much appreciate any help in advance.