Emulating table-cell colspan

http://stackoverflow.com/questions/25830401/css-display-table-cell-width-not-working

HTML

<div id='main_wrapper' class='dtable'>
    <div id='control_panel_wrapper' class='drow'>
        <div id='control_panel' class='dcell'>Control Panel</div>
    </div>
</div>
<div class='dtable'>
    <div id='bottom_wrapper' class='drow'>
        <div id='left_nav' class='dcell'>Left Nav</div>
        <div id='chart_container' class='dcell'>Chart Container</div>
    </div>
</div>

CSS

.dtable { 
    display:table; 
    width:100%;    
}

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

.dcell {
    display:table-cell; 
    border:1px solid gray;
}

#control_panel{
    /* width:100%; */
}

#left_nav {
    /* width:14%; */
    /* padding: 1%; */
}

/* #chart_container {
    width:84%; 
    padding:1%;
} */

JavaScript

$(document).ready(function() {
    console.log($(window).width());
    console.log($("#bottom_wrapper").width());
    console.log($("#left_nav").width());
    console.log($("#chart_container").width());
});