HTML and CSS   XSLT   JavaScript   Images   Soft   Etc  
Vladimir Tokmakov

Another way of fixing IE float bug 6 April 2007


Для просмотра этого примера необходим IE.

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.

Как это выглядит в браузере

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



Share this page:


© 1995–2015 Art. Lebedev Studio