CODEWITHSUNDEEP
htmlcss
Dany D
Dany D

Reputation: 1189

Two divs, 50% width each, floated left, get one over the other in IE7 on window resize

I have this simple code, two floated left divs inside a wrapper.

    <div id="wrap">

        <div class="right">
            <p>I am right</p>
        </div>

        <div class="left">
            <p>I am left</p>
        </div>

        <div style="clear: both"></div>

    </div><!-- wrap -->

Both divs are 50% width and here is the demo

If I resize the browser window in IE7, the second div floats under the first.

How can this be fixed? I have been searching all over the net for a solution but with no luck.

Ty!

Upvotes: 3

Views: 1455

Answers (1)

thirtydot
thirtydot

Reputation: 228192

IE7 is buggy with sub-pixel rounding in this case.

You'll notice that if you change the browser width in IE7, half the time the layout works, and the other half the layout is broken due to the combined width of the divs being one pixel wider than it really should.

There are a few different things you can do to fix this, here's one:

http://jsbin.com/OfeCEHo/1/

#wrap {
    margin: 0 auto;
}

.left {
    width: 50%;
    float:  left;
    background-color: red;
}
.right {
    overflow: hidden;
    background-color: blue;
}

I also swapped the order of your left and right divs in the HTML.

Upvotes: 1

Related Questions