Floated Image containers breaking flow

HTML & CSS
1

On this page, scroll down to the ‘Our Mission:…’ section. If you resize your screen to about 767px wide, you’ll see the photos break up and the fifth and sixth image do not align. I’m not sure if it’s Bootstrap’s box-sizing or if there is something else causing it to break. I’ve disabled the box-sizing and tested again, but didn’t see any difference.

Anyone have a clue?

2

Tricky. Some heights are 240px, some heights on the divs are 241. If you notice closely, the middle row…the left div has 241px. The right has 240. So the one that gets dropped off is due to it being unable to be level on the same line as the others (since that 1px is pushing it down)

Perhaps a min-height or force a specific height on those boxes?

3

You could try using display: inline-block; instead of float. E.g.

.programs {
    word-spacing:-.25em;
    display:table;
}

.programs > div {
    float: none;
    display:inline-block;
    word-spacing:0;
}

(I added float: none; for testing purposes only. Instead, just remove the float.)

4

Hi,

The natural size of those images is 434px apart from 2 images which are 432px wide. That means that in a responsive container with height:auto the height of the image will vary by the one pixel that Ryan mentions.

Either create all the images at the same natural original width (434px) or as Ralph suggests use display;inline-block (but that will leave you with a 1px white gap below the image).

5

That’s what was missing PaulOB and ralphm: the fact that there was a 2px difference in some of the images (which shouldn’t have happened). After resizing the images correctly, the issue is no longer a problem.

Thank you!