Thursday, 22 August 2013

Column-Width and Image Wrapping in Firefox

Column-Width and Image Wrapping in Firefox

Using the CSS3 column-width property in Firefox seems to not work as
expected. When an image that is taller than it's container exists, the
image does not wrap onto a new column as expected:
Example in JSFiddle
<div id="container">
<img src="http://placehold.it/300x600" alt="" />
</div>
and
#container {
border: 1px solid #000;
width: 1200px;
height: 300px;
-moz-column-width: 300px;
-webkit-column-width: 300px;
}
One would expect two columns with the top half on the left followed by the
bottom half of the image. This works as expected on Chrome, however with
Firefox, it seems to simply overflow. Is there an additional CSS style
that needs to be applied in this case, or is this something that is
broken/not implemented in Firefox?

No comments:

Post a Comment