When it came to IE, I thought I had seen it all. Apparently not.

I have created a very simple floated layout and on the floated divs is jumping out of place. Instead of trying to explain in a paragraph what is happening, I have attached a very thorough image diagram that explains what the problem is in hopes that you may see what is going wrong. Thanks a bunch for your help as I have exhausted my own research and testing with no luck.

Try removing display:inline from rightCol and see if it still happens.

FYI, according to W3C specifications, the display style should always be ignored whenever a float is present. All browsers except for IE follow this. The only reason you would set display:inline with a floated element is to alleviate a very specific browser bug, which I'm not sure you would experience given the markup in your layout. So, there may not be any need for all those display:inline styles.

Hey the_pm,

Thanks for the suggestions. Unfortunately it didn't work. For the life of me I can't see what is going wrong. Every browser I am testing it in works perfect except for IE (big surprise). But it doesn't seem to be anything related to the normal 'measurements' or drop bug etc.

I have just noticed that if I drop the closing </div> tag for #content... it works perfectly in IE. However, when I do this, it messes up the layout for all other browsers and drops #nav below everything. My HTML is spot on, as I have scoured it for any errors and found it to be correct. Hopefully I can find out what is going on quickly. :(

Does it make a difference if you move the rightCol above the main content area in your markup?

Does it make a difference if you move the rightCol above the main content area in your markup?
Yea I gave that a try among other things with no luck. It's as if IE is closing the div tag early before getting to #nav.

Can you link to the actual file so I can download and play with the markup?

huh... i have some troubles with IE too... working with it =)

Can you link to the actual file so I can download and play with the markup?
Hey the_pm, I really appreciate your willingness to help... you have been a lifesaver to me in the past too. Unfortunately I can't post a link to the content since it is strictly private use and password protected during development stage. In the code I have posted, xhtml... the blah blah blahs merely contains some <p>'s and <a>'s and the CSS only contains some added coloring and basic styling (non-measurement).

Can you post a link to the test pages you posted as screenshots? That would do the trick too :)

Can you post a link to the test pages you posted as screenshots? That would do the trick too :)
Haha... I wish I could... with your talent you could probably diagnose the problem in a matter of seconds. But actually those "screenshot" images I posted were completely created in photoshop by scratch. That's kind of why I posted the homemade images, because I can't link to the actual documents. :(

Ok then, copy/paste the markup from the screen shot. I'm just trying to make it so I don't have to retype it all just to figure out the problem.

Think Jerry Maguire. "Help me help you" ;)

Try adding a <br clear="all"> after the #mainwrapper :D

I'd like to thank everyone, especially the_pm for your efforts and help in this matter. I do have some good news as I have found the culprit that caused IE to display it all out of whack. It is quite an oddity... and after rigorous testing, it is hard to see why this happened, but it did:

Apparently if you create a definition list within a floated element that MUST be within a parent and ancestral floated elements, you can put anything you want within the <dl> tags, like a <em> or <br /> etc... but you CANNOT place a div element within the definition list or IE goes haywire. It seems that every other element works fine, both block and inline.. so not sure why DIV is the problem maker.