Fixing IE float bug

HTML and CSS XSLT JavaScript Images Soft Etc

Internet Explorer is required to view this example.

	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 the 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

<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>

Order a design...

Fixing IE float bug 19 October 2005

How it looks in the browser