DIVs jump up and down in IE

**Nathand** · 04-02-2008, 12:04 PM

As usual stuff is working in FireFox but not IE.

Code:

<html>
<body style="text-align: center;" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">

<div style="margin: 0pt auto; width: 80%; height: 700px; background-color: purple;">

    <div style="width: 100%; background-color: red; height: 100px;">
        This is the top nav.
    </div>

    <div style="width: 15%; height: 500px; background-color: green; float: left;">
        
    </div>

        <div style="width: 70%; height: 500px; background-color: blue; float: left; text-align: center;">
            <br><br><br><br><br><br><br><br><br><br>
            <h1>Sorry! Your Basket Is Empty.</h1>    
        </div>

    <div style="width: 15%; height: 500px; background-color: pink; float: left; text-align: center;">
            
    </div>

    <div style="width: 100%; margin-top: 0pt; background-color: orange; height: 100px; text-align: center; float: left;">
        <br>
        <br>
        All Rights Reserved. Copyright ©<br> 
    </div>



</div>

</body>
</html>

The DIVs are colored differently so it's easier to see what's going on. For some reason in IE the pink DIV (far right) drops down and up repeatedly when resizing the window in IE. Is there a hack to fix this?

Thanks in advance,

Nathand

**wayfarer07** · 04-02-2008, 02:04 PM

You must really be cutting it close in your percentage widths calculation. There are some funny rounding differences between the browsers. I'm guessing if you lower the widths (maybe by half a percentage here and there) this behavior might be prevented.

**Nathand** · 04-02-2008, 02:25 PM

I'm not doing anything floating point though, all the widths are nice solid numbers.

**LadynRed** · 04-02-2008, 02:44 PM

The point is, IE chokes like that on really tight layouts. You HAVE to give it some room, otherwise it's just going to float-drop on you.

**wayfarer07** · 04-02-2008, 02:47 PM

I don't think it matters if you're using floating point. There has to be rounding of the PIXELS to determine how large to make a div at certain window width. IE is simply calculating it differently. Try my suggestion, because what you are describing sounds like breaking floats, which is caused by floats running out of space (div widths being too large).

**Nathand** · 04-02-2008, 06:30 PM

I simply can't get this to work and would really appreciate if you could take a look at this page: scrubpros.com/cgi-bin/shopper.cgi!

Thanks,
Nathand

**Nathand** · 04-06-2008, 11:37 PM

*Bump*

Problem's still here: http://www.scrubpros.com/cgi-bin/shopper.cgi

**LadynRed** · 04-07-2008, 10:04 AM

The FIRST thing you need to do is put a proper DOCTYPE on your pages, nothing in IE is going to work properly w/o one.