CSS display:table-row does not expand when width is set to 100%

I'm having a bit of a problem. I'm using FireFox 3.6 and have the following DOM structure:

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

And the following CSS:

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

If I take off the display:table-row it will appear correctly, with the view-row showing a width of 100%. If I put it back it shrinks down. I've put this up on JS Bin:

http://jsbin.com/ifiyo

What's going on?