6

I'm doing a small 2-pane layout using display:table. For spacing (also from the background image), I use padding. As I need the children to have an exact width:50% from the available space (taking regard for the padding of the parent div), I use box-sizing:border-box.

This works fine in Opera, but in Chrome the box-sizing:border-box or even -webkit-box-sizing:border-box is silently ignored.

I made a demo which shows the issue. The two red boxes should be square and the blue box should be 200px in width and height: 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 the 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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
fabb
  • 11,660
  • 13
  • 67
  • 111

2 Answers2

5

Yes, Google chrome bug:

Issue #103543 - CSS display: table bug

Some case may be resolved by addding/removing specific side of padding (like the jsfiddle in the bug report), but your case may not be possible.

It is easier and more stable by using float there, if width and height is known and you want square cells.

Note: Since table layout have the ability to break the assigned css width/height, it is better not using it unless it is table-like structure or you want to contents expand the container - so your !important in width & height is not working.

Chris Stratton
  • 39,853
  • 6
  • 84
  • 117
vincicat
  • 1,811
  • 1
  • 13
  • 13
  • 1
    Thank you so much for your **note** - it helped me to find a workaround. I **removed** the `display:table` from `#table`, which makes my layout working in Chrome, Opera and Firefox. There are 2 downsides that luckily don't affect me: 1) the single cells don't span the whole height anymore, and 2) no other `display:table*` should be there as it could interfere. Have you got any additional information, **why** an element with `display: table` might break `width` or `height` properties (had that issue in Opera when trying another workaround)? – fabb Jan 04 '12 at 17:51
  • "Table width is breakable" this is because this is a kind of inline-block model (historical reason - may be people prefer it can expand based on content), see th link for the spec [link](http://www.w3.org/TR/CSS2/tables.html#model). To fix the problem, you may try `table-layout:fixed` [link for more solution](http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/) – vincicat Jan 05 '12 at 18:33
  • 1
    p.s. if you want the cell span the whole height, try flexbox: [webkit updated version](http://www.the-haystack.com/2012/01/04/learn-you-a-flexbox/) or [CSS3 flex box, the supported version](http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/) -- – vincicat Jan 05 '12 at 18:40
  • flexbox is nice, thanks for the tip! unfortunately no opera support: http://caniuse.com/#search=flexbox – fabb Jan 06 '12 at 16:14
  • Rolled back 3rd party edit which altered the meaning of the post by removing a potentially important qualifier on its applicability. – Chris Stratton Jun 24 '13 at 20:20
0

Remove -webkit- for chrome browser.

Rajesh Mattu
  • 1