Fluid layout with some elements fixed size

Min-width is necessary on #row to accommodate the two fixed width columns. Otherwise the layout breaks on shrinking.

HTML

<div class="row">
    <div class="main">
        <h1>Hello World</h1>
        <p>I'm looking into the whole responsive design thing and finding fluid grids great for that - the only problem is they seem to break when I try to give a fixed width to any column. As you shrink the screen, the columns pop out of float. I'd have expected a fluid column with a percentage width (or no width) just to shrink, leaving the fixed width columns in place. How easy is it to create a hybrid fluid/fixed grid like this? I've seen one solution with inline-block instead of floated blocks, but how good is that across browsers, and is it a clean way of doing things?</p>
    </div>
    <div id='sideNav'>
        <div class="middle">
            <h2>Middle</h2>
        </div>
        <div class="sidebar">
            <h2>Sidebar</h2>
        </div>
    </div>
</div>

CSS

.row {
    width: 90%;
    min-width: 400px;
    max-width: 960px;
    margin: 20px auto;
    border: 1px solid #ddd;
}

.main {
    padding: 10px;
    background: #efefef; 
 
}

#sideNav {
    display: table-cell;
    width: 280px;
    verticle-align: top;
}

.middle {
    display: table-cell;
    width: 140px;
    padding: 10px;    
    background: #bbb;  
}

.sidebar {
    display: table-cell;
    width: 100px;
    padding: 10px;    
    background: #555;  
}