Responsive boxes

[ACTIONpack]

Question on why the boxes are not lining out right on the partner boxes. When you resize the pages are not staying together.  Want to know how to fix it. If you resize the browser below 970px then you see big white space.

 

http://romabio.com/partners/

 

CSS code below is that most is doing. I didn't do it. A coder on the other side of the country is doing it.

.partners-large,
	.partners-med {
		width: 46.08%;
	}
	.partners-small {
		width: 22.06%;
	}
	.partners-large img,
	.partners-med img,
	.partners-small img {
		width: 96%;
	}
	.partners-home .partners-item {
		margin: .9%;
		padding: .9%;
	}
	.partners-home .partners-item.partners-med {
		padding: .9% .9% .8% .9%;
	}

[briley]

Do you mean the empty space under the "Peter Block Architects" block? If so, it's a side effect of the floating that's going on and the percentage widths that are being used to line everything up: notice that the large "Peter block ARCHITECTS" block is one tiny pixel taller than the combined height of the three blocks to the right of it. Because of how floating works, that one pixel is enough to cause the next two blocks (CHRISTOPHER ROLE and D. Stanley Dixon) to also float to the right of the Peter block ARCHITECTS block instead of underneath it.

 

Since it looks like all of the blocks keep the same position in both responsive layouts and just change width, you could try adding a style="clear:left" declaration to all of the blocks that should be on on the left edge (like the CHRISTOPHER ROSE block)?

 

 

[Seahorsepip Veteran]

Using percents like this is kinda bad css practise, 22.06% isn't exactly used because of a technical reason, it's just a number that worked after trying hundreds of values I guess...