Trying out css columns: implementing columned content with a wrapper div:
Everything seems to work fine in webkit and older versions, but in Firefox v22 there seems to be an issue (no columns displayed and behavior varies with window size).
Is this a bug in the new version or is there a possible workaround (such as additional CSS rules) to achieve the same behavior as in webkit and older versions?
HTML:
<div class="wrap">
<div class="columns">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</div>
</div>
CSS:
.wrap {
position: absolute;
left: 100px;
outline: 1px dashed red;
width: 300px;
height: 407px;
}
.columns {
position: absolute;
left: 0px;
right: 0px;
-webkit-column-width: 276px;
-webkit-column-gap: 25px;
-webkit-column-rule: 0px none;
-moz-column-width: 276px;
-moz-column-gap: 25px;
-moz-column-rule: 0px none;
height: 407px;
font-size: 20px; text-align: left;
-moz-user-select: none;
cursor: default;
visibility: visible;
display: block;
}