My page layout breaks in IE7, rights itself if I hover over/open a menu item...

Question

As you can see if you go to the link below in IE7/AOL, the layout breaks if you resize the window. However, click the products menu tab and it rights itself. I haven't a clue why or how to fix it, and it looks sloppy. On resizing the page, the logo and breadcrumb trail div stay where they ought to be, but my horizontal nav menu and everything below the breadcrumb div end up about 20-30 pixels off to the right. On refreshing the page, changing page, or opening a pull down menu item, it all falls back into the correct alignment.

link text

Answer 1

It is working as it should. The li elements in the menu are all floating to the available space. If the window does not have enough space they will float to the next available line. Nothing to see here.

Just use the CSS min-width to stop the DIV from becoming too small for the menu. Or consider a rigid layout (as oposed to a flexible one).

Add the following line to your div to make it work.

#outer {
    min-width:790px;
}