Search code examples
cssfirefoxyui-pure-css

Pure CSS: Responsive images breaking columns with border-box and padding on Firefox and Opera

I'm using the responsive grid from Yahoo Pure CSS as a basis for a WordPress theme / layout.

http://smartwatchapps.co.uk/module-test/

Columns without images are fine; when an image is present, the columns expand on FF and Opera. Chrome / Safari ok.

This happens when I add box-sizing:border-box and horizontal padding to the Pure units, as per http://purecss.io/grids/

/* Apply padding to Pure units
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.pure-g > [class*="pure-u"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 20px;
}
img{
max-width: 100%;
height: auto;
display: block;
}

The same thing happens if I remove the box-sizing:border-box and padding on the Pure units, and add it to a div inside the Pure unit.

Adding width: 100% fixes the overflowing images on FF and Opera but of course this makes all images 100% width of their container (eg the small image of OJ on this page then expands to fill 100% of it's container) - so this is not a viable solution.

Doesn't seem to happen on other pages where a pure-g is not nested inside another one:

http://smartwatchapps.co.uk/markup-image-alignment/

Going nuts, any ideas appreciated.

Solution

  • I think it's the float: left; property on the container changes the behavior. And looks like you don't even need it, so remove that.

    .content-block {
    float: left; /*get rid of this line*/
}

    And I think it's a good idea that to not modify the default grid, such as applying box-size paddingand margin etc. If you need extra spacing around some elements, just put them into a container <div> and set the properties on it, and put it into the gird.