alternative for css float and clear with ie7

Question

I have a page with this elements:

<body>
    <div class="C2">
        <div class="Ban">
            <div class="blockWithLabel position BankCode">
                <span>BankCode</span>
                <br />
                <input type="text"/>
            </div>
            <div class="blockWithLabel position BranchCode">
                <span>BranchCode</span>
                <br />
                <input type="text" style="width:500px"/>
            </div>
            <div class="blockWithLabel position AccountNumber">
                <span>AccountNumber</span>
                <br />
                <input type="text"/>
            </div>
            <div class="blockWithLabel position CheckDigits">
                <span>CheckDigits</span>
                <br />
                <input type="text"/>
            </div>
            <div class="blockWithLabel position BankName">
                <span>BankName</span>
                <br />
                <input type="text"/>
            </div>
            <div class="position validator">
                <div class="validator">VALIDATOR</div>
            </div>
        </div>
    </div>
</body>

I want to apply this style:

        .Ban { overflow:hidden }
    div.blockWithLabel { display:inline-table; overflow:none; }

    .C2 { background-color: blue; }
    .C2 div.blockWithLabel { background-color:yellow; margin:2px;}
    .C2 div.position { float:left}

With all browsers, I have (if the width of the screen is enough big) 6 elements in the same line

Now, I want to make breaks using

.C2 div.position.AccountNumber, .C2 div.position.validator { clear:left }

The problem is that with IE7, AccountNumber appears in a new line, but the next elements CheckDigit and BankName doesn't appear in the same line but in the previous !!

How can I fix it ?

change .C2 div.position.AccountNumber, .C2 div.position.validator { clear:left } to .C2 div.position.AccountNumber, .C2 div.position.validator { clear:both } — Nicholas King, Jan 16 '13 at 08:58
see http://stackoverflow.com/questions/2273107/how-to-fix-ie7-float-clear-combination basically use field-wrapper — Rachel Gallen, Jan 16 '13 at 09:03

score 1 · Answer 1 · answered Jan 16 '13 at 09:01

use conditional comments for IE7

<!--[if lte IE 7]>
<style type="text/css">
    /* hide other layout for other browsers by 
       setting display to none 
    */
    .C2 {
        display:none;
    }
</style>
Use ie7 formatting here with tables instead of divs.
<table>
    <TR>
        <T...................
<![endif]-->

alternative for css float and clear with ie7

1 Answers1