Question

The problem is, that i need to force all divs to be in one line. To have table-cell behavior.
And to support IE7.

Link to fiddle http://jsfiddle.net/Beck/BH5WG/
And ofc copy of code below:

Html:

<div class="wr">
    <div class="con">
        <div class="item">some text1</div>
        <div class="item">some text1 some text1</div>
        <div class="item">some text1</div>
        <div class="item">some text1 some text1</div>
    </div>
</div>

<div class="wr" id="wr2">
    <div class="con">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <div class="item">some text1</div>
                </td>
                <td>
                    <div class="item">some text1 some text1</div>
                </td>
                <td>
                    <div class="item">some text1</div>
                </td>
                <td>
                   <div class="item">some text1 some text1</div>
                </td>
            </tr>
        </table>
    </div>
</div>

Css:

.wr {
    width:300px;
    border:1px solid red;
}
.con {
    height:24px;
}
.item {
    float:left;
    white-space:nowrap;
}

#wr2 {
    margin:50px 0px 0px 0px;
}


​

Answer 1

I don’t have my IE7 test environment to hand but have you tried display:inline-block; instead of float:left?

IE7 doesn’t understand that by default, but it does understand display:inline; zoom:1;

This might make it more willing to comply with white-space:nowrap;

For example, from your fiddle:

.wr {
    border:1px solid red;
    white-space:nowrap;
}

.con {
    height:24px;
}

.item {
    display:inline-block;
    *display:inline;
    *zoom:1;
}

#wr2 {
    margin:50px 0px 0px 0px;
}