Dynamic Menus not Displaying Correctly in IE

[dcleave]

I have a simple 2-column liquid layout test page where I am trying to get my dynamic menu to display correctly. The page displays correctly in Firefox, but in IE, the menu (right column) displays lower on the page at the point where my left column ends when I resize the window to a width smaller than the menu width. The menus do not wrap around the bottom of the left column, it just moves straight down. The menu is generated from a JavaScript file, which uses list tags to display the menus. The main menu portion is made up of images, and the submenu is text. The images that make up the menu are, in total, 502px wide. When resizing in IE, the browser eventuall adds a horizontal scroll bar, but not before dropping the menus down the page. My page and css is:

<div id="page">
<div id="side">Side Column<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
<div id="main">
<div id="header"><script language="JavaScript" src="../scripts/imenus_data_test.js"></script></div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</div>

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; font-weight: normal; background-image: url(../images/template2/bg.gif); background-repeat: repeat-x; background-color: #993333; margin: 5px 0 ; padding: 5px 0 ; text-align: center; }
#page { width: 90%; margin: auto; padding: 0; }
#side { float: left; display: inline; width: 208px; background-color: #FFFFFF; margin: 0; padding: 0; text-align: left;}
#main { margin-left: 228px; text-align: left; }
#header { text-align: right; }
#content { text-align: left; background-color: #FFFFFF;}
#footer { text-align: left; }

I know that when I remove the Javascript reference, the page displays correctly, so I think it has something to do with the images referenced in the JavaScript file.

I hope this is not confusing, as I am not able to post a URL. I would greatly appreciate any help.

[londrum]

it's difficult to tell without seeing all of the code (we need to see the code and CSS for the lists) but it's probably that old chestnut - the box-model bug.
if you set something to a specific width, like you have for #side, then firefox will display it correctly - with that exact width. but IE 6.0 will add on any padding that you have inside it. so if your list has 10px of left-padding, say, then #side will grow by an extra 10px in IE 6.0. that is probably why it is dropping underneath the other section - because it can no longer fit where it's supposed to go.

try removing all of the padding and margins from anything inside #side, and see if that fixes it.