CODEWITHSUNDEEP
htmlcssmargininternet-explorer-6
wong2
wong2

Reputation: 35720

Strange margin problem in IE6

HTML: 

<div id="outter">
    <div id="left">
        <div id="up">
            This is the up div
        </div>
        <div id="down">
            <h3>This is the down div</h3>
        </div>
    </div>
</div>

CSS: 

#outter{
    height: 400px;
    background: white;
    border: 1px solid #bfd2e1;
}
#left{
    float: left;
    margin-right: 0;
    padding: 0;
}
#up{
    width: 355px;
    height: 50px;
    border: 1px solid #ffe59f;
    padding: 12px;
    line-height: 16pt;
    margin: 15px 0 0 15px;
}
#down{
    float: left;
    margin: 15px 0 0 15px;
    width: 381px;
}
#down h3{
    border: 1px solid #bfd2e1;
    background-color: #edf6fe;
    padding: 10px;
}

The problem is, in Chrome/Firefox, the page looks like:
enter image description here
but in IE6:
enter image description here
As you can see, there is a margin problem with #down.
Fiddle: http://jsfiddle.net/wong2/dTEcs/1/
How could that happen?

Upvotes: 0

Views: 91

Answers (1)

alex
alex

Reputation: 490153

IE6 doubles margins on floated elements.

Add display: inline to your floated element (#down).

Upvotes: 6

Related Questions