Navigation breaks on hover in IE

Question

I'm having a slight problem. Whenever I hover over the "SEO" option on my navigation in IE, the navigation breaks & moves to the side. This doesn't happen in Firefox. Changing the navigation to position:absolute fixes it, but then the main content becomes merged with the navigation. It all validates. Any help would be much appreciated!

http://www.joemarketeer.com

http://jsfiddle.net/eoJ1/Ra4tR/

Thanks loads!

Answer 1

The navleft and navright divs are resizing independently, which is to be expected given your design structure. But it looks weird as it comes down on top of the content below:

One suggestion I can give you is not to set the navigation bar width in %, which you have done for these two divs. If you set a fixed width (in px) or remove the width specification completely (in which case it will take the width of its inner content), a horizontal scrollbar will appear below the page when the width is small, which I suppose is fine. Also, use as few float s as possible as they break the flow of content in the document and are more prone to breaking layouts. Both these divs have a float:left , which can be dumped for more stable solutions. I'm saying all this because I think the breaking of the layout on hover is occurring due to these reasons. If you can take care of this, your problem might disappear.

So my suggestion is to have a single nav div with width: 100% . Inside this put two divs: navleft and navright with display:inline and widths a.) specified in px or not at all, or b.) specified in % but with some min-width in px. If you don't specify any width for navright , it will expand to fill all of the space on the right.

This way these two divs will not reflow independently.

Basically, toy around more until you get better command over CSS; I think more experience will automatically help you sort out issues like this.