[thelist] CSS Woes

[Sarah Adams]

> 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;
> }

Can you also send us the CSS for the "nav" div?

-- 
sarah adams
web developer & programmer
portfolio: http://sarah.designshift.com
blog: http://hardedge.ca