Give both elements width:100% or display:table-row.
This is happening probably because you have display: table; for parent div. display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TR's and TD's.
I'm not sure whether width is an inherited attribute for div.
To fix the issue, set the width of .top to 100%.
Add the strict doctype to your page, otherwise IE is in quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
With that at the top of the file it works in IE8 for me.
Well on further research I'm pretty sure IE8's table support is completely buggy. I added a wrapper element on the text so that I could mimic a table exactly (code below). Then I put an actual table below that. The table works exactly as you want it, but the equivalent in divs does not. I tried other elements like spans but it still doesn't work.
In short: use ordinary tables if you can, or rethink your layout.
Here's the code I used. The two "tables" should be exactly the same, save a little padding here and there:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>whatever</title>
<style>
.box {
display: table;
width: 250px;
border: 1px solid red;
padding: 10px;
padding: 5px;
}
.top {
display: table-row;
margin: 10px;
padding: 5px;
}
.bottom {
display: table-row;
margin: 10px;
padding: 5px;
}
.top .cell {
display: table-cell;
border: 1px solid blue;
margin: 5px;
padding: 5px;
}
.bottom .cell {
display: table-cell;
border: 1px solid green;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
<div class="cell">top</div>
</div>
<div class="bottom">
<div class="cell">bottom
oooooooooooooooooooooooooooooooooooooooooooooooooo</div>
</div>
</div>
<br><br>
<table style="border: 1px solid red; display: table;width: 250px">
<tr style="display: table-row;">
<td style="border: 1px solid blue; display: table-cell;">top</td>
</tr>
<tr style="display: table-row;">
<td style="border: 1px solid green; display: table-cell;">bottom
oooooooooooooooooooooooooooooooooooooooooooooooooo</td>
</tr>
</table>
</body>
</html>