Technogrette




HTML XSLT JavaScript Etc
Vladimir Tokmakov

Fixing IE float bug 19 October 2005

Viewing this example requires IE.

Task:

Deal with float behaviour when width is specified as percentage.

This solution is based on the undocumented feature allowing negative values for margin properties (there is another way).

How it looks in a browser

Column width 30%
Column width 70%, this one behaves correctly (in accordance with CSS standards)
Column width 30%
Column width 70%, this one bounces when IE window size changes
01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
<style type="text/css">
    body { background: #ffffff; }

    .columns { clear: both; width: 100%; }
    .columns .a,
    .columns .b
    { float: left; }
    .columns .a { width: 30%; //margin-right: -100%; background: #ccffcc; }
    .columns .b { width: 70%; //margin-left: 30%; //display: inline; background: #ffcccc; }
    
    .wrong_columns { clear: both; width: 100%; margin-top: 1em; }
    .wrong_columns .a,
    .wrong_columns .b
    { float: left; }
    .wrong_columns .a { width: 30%; background: #ccffcc; }
    .wrong_columns .b { width: 70%; background: #ffcccc; }
</style>
<div class="columns">
    <div class="a">Column width 30%</div>
    <div class="b">Column width 70%,
        this one behaves correctly
        (in accordance with CSS standards)</div>
</div>
<div class="wrong_columns">
    <div class="a">Column width 30%</div>
    <div class="b">Column width 70%,
        this one bounces when IE window size changes</div>
</div>


Share this page:

E-mail: mailbox@artlebedev.com
© 1995–2012 Art. Lebedev Studio