Setting a fixed height to a block breaks the 100% width

Question

The problem is when I try to set height: 20px to all rows this breaks the natural width: 100% from a block element. This bug only occurs on IE7 (tested on FF, Chrome and IE8).

HTML

<div id="container">
   This must be adjusted to content
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
    <div class="row">row #</div>
</div>

CSS

#container {
    border: 1px solid black;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px;
}
.row {
    border: 1px solid blue;
    margin-top: 2px;
    height: 20px;
}

Demo

http://jsfiddle.net/97fax/3/

Notes

• I'm testing on IE8 with compatability mode for IE7
• Setting a fixed width to container and set width: 100% for rows is not an option. ​

Answer 1

This might not be the answer you're looking for (a table, ugh), but here goes...

<div id="container">
    <table><tbody><tr><td>
        This must be adjusted to content
        <div class="row">row 1</div>
        <div class="row">row 2</div>
        <div class="row">row 3</div>
        <div class="row">row #</div>
    </td></tr></tbody></table>
</div>

I spent 1/2 an hour trying various combinations of hasLayout and position: relative and inline/inline-block etc, but a table was all I could get working I'm afraid :-(

Answer 2

Good to find a fellow country man :)

Just tested with "line-height: 20px;" instead of "height: 20px;" and worked just fine on:

1. IE 7
2. IE 8
3. FF3+
4. Safari
5. Chrome
6. Opera

Doc-Type used for this test was "strict".