Chrome and window size: display frame: table

Question

I am doing a small layout with two panels using display:table. For the interval (also from the background image) I use padding. Since I need the children to be accurate width:50%from the available space (given the filling of the parent element div), I use box-sizing:border-box.

This works fine in Opera, but is box-sizing:border-boxeven -webkit-box-sizing:border-boxignored in Chrome .

I did a demo that shows the problem. The two red rectangles should be square, and the blue box should be 200 pixels wide and high: http://jsfiddle.net/fabb/JKECK/

Here's the html source:

<div id="table">
    <div id="left">
        Something on the left side
    </div>    
    <div id="right">
        Something on the right side
    </div>
</div>

And css:

#table {
    display: table;
    /*border-collapse: collapse;*/

    width: 200px !important;
    height: 200px !important;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;

    margin: 0;
    border: 1px solid blue; 
    padding: 60px 20px;
}

#table #left, #table #right {
    display: table-cell;

    width: 50%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;

    margin: 0; 
    border: 1px solid red;
    padding: 0; 
}

Is this a bug in Chrome? Or am I doing something wrong?

Answer 1

, Google:

# 103543 - CSS:

/ (, jsfiddle ), .

, float , , .

: css width/height, , , , !important width height .

Answer 2

-webkit- Chrome.