Box-shadow trimmed in CSS columns in Chrome

Question

I want the block elements inside CSS columns to have box shadow. The following, simplified code renders as expected in IE10 and Firefox 21, but in current C

Answer 1

Chrome is failing to compensate for the extra width added by the shadow.

If you add "text-align: center;" to the div#column-container, the yellow inner div will center and you can now see shadow on the left edge.

If change the insignificant "width: 100%;" on the yellow inner div to "width: 85%;" (or a width of your choice) now there is room for the entire shadow.

div#column-container {   
  /* Set 2 columns*/
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;

   /* insignificant - except text-align, which corrects Chrome */
  width: 50%;
  text-align: center;
}

div#column-container div {
  background-color: yellow;

  /* set shadow for yellow elements */
  box-shadow: 0px 1px 3px #000;
  -webkit-box-shadow: 0px 0px 15px #000;
  -moz-box-shadow:    0px 0px 15px #000;
  box-shadow:         0px 0px 15px #000; 

  /* Make sure that yellow div is not split between columns */
  display: inline-block;

  /* the rest - width was significant for Chrome, you may need to adjust for your real project */
  width: 85%;
  height: 70px;
  margin-top: 0;
  margin-bottom: 20px;    
}

Here is a jsFiddle.