css3 multi column floated image issue


here is the problematic page in Webkit browsers:

the second image does not float to the right of the last column, but it is displayed below all the section text.

any ideas?


Yes it’s definitely a bug and a nasty one at that so is worth filing a bug report.:slight_smile:

yes, thanks - that fixed it
should I report the bug?


It seems to be a bug in Safari.

I’ve had a play around with it and the only fix I can see is to add overflow:hidden to section which makes safari behave.

section {
    -moz-column-rule-style: inset;
    -moz-column-rule-color: rgba(0, 0, 0, .8);
    -moz-column-rule-width: 1px;
    -webkit-column-rule-style: inset;
    -webkit-column-rule-color: rgba(0, 0, 0, .3);
    -webkit-column-rule-width: 1px;

Note that you also missed the opening anchor tags for your figcaption :slight_smile: