Another way of dealing with float bug in IE

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.

I figured out that setting nonzero value right padding (padding-right: 1px) for the bordering element also solves the problem.

This method has certain limitations. So if you experience any trouble, try the first approach.

How it looks in the browser

Column width 30%

Column width 70%, this one doesn’t bounce

Column width 30%

Column width 70%, this one suffers from the bug when IE window size changes

<style type="text/css">
    body { background: #ffffff; }

    .columns { clear: both; width: 100%; //padding-right: 1px; //overflow-x: hidden; }
    .columns .a,
    .columns .b
    { float: left; }
    .columns .a { width: 30%; background: #ccffcc; }
    .columns .b { width: 70%; 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 doesn&#146;t bounce</div>
</div>
<div class="wrong_columns">
    <div class="a">Column width 30%</div>
    <div class="b">Column width 70%, this one suffers from the bug when IE window size changes</div>
</div>

Order a design...

Another way of fixing IE float bug 6 April 2007

How it looks in the browser