Question

Sorry, I don’t have the exact code with me, but hopefully this works with the example I provide.

Why is it that in IE, some nested divs pop out and sit in the wrong place (example, 200px down from where it should be).

<div style="width:1024px;height:103px;background-color:green;">
    <div style="float:left;width:300px;height:103px;"><img src="LOGO URL"/>
    </div>
    <div style="float:right;width:180px;height:103px;">
    </div>
</div>

Does anyone understand what I mean? I’m pretty sure it has nothing to do with double margins. Should I still bother making website compatible with IE7 and 6?

I’m trying to learn html the proper way. I want to be able to ensure my code is always compatible with all browsers and accessible to the disabled. Is there somewhere you would recommend that I can learn the “correct” practices? I understand most HTML, but compatibility can have issues.

Answer 1

Your IE problem is most likely because float:right element is appeared after it’s siblings. (see number 3 below).

Speaking about how to learn HTML and CSS best practices, I would recommend playing around with CSS Zen garden to see how different amazing designs are built using a “static” html.

Looking at the HTML I see following issues:

1. Specifying static width and height is not a good idea
2. float right element should appear before any other sibling (otherwise IE can not render it properly) – (this is most likely the issue).
3. Having float:left for the other element is not necessary
4. adding a clear:both in the end of all siblings will ensure that parent will expand in height (without the need to specify height)

so I would change your HTML to this:

<div>
    <div style="float:right;"></div>
    <div><img src="LOGO URL"/></div>
    <div style="clear:both"></div>
</div>