[RESOLVED] Float / Clear Problems

[dtm32236]

Hey guys...
I'm having a problem with floating objects, maybe someone here can help.

The basic format of the site is this:

<div id="leftNav">
  left navigation
</div>

<div id="mainContent">
  main content
</div>

CSS:

#left_nav {float:left; width:14em;}
#mainContent {width:auto; margin-left:15em;}

This works fine to have the two columns (navigation on left, all content on right).

BUT - in the main content, I often have to float elements which means that I also have to clear them. But when I clear anything, it drops below leftNav. Check out the screenshot if it's unclear what I'm talking about.

I've tried a million different things, including adding float:none; to the mainConent div, but nothing I do works. Does anyone have any ideas?

Thanks a lot,
Dan

[KDLA]

Float the images right, and then clear right.

[dtm32236]

hmmm... that could work too...

I posted this on another forum as well, and I was told to try adding overflow:hidden to the mainContent div (it worked perfectly).

Thanks a lot, KDLA!