Ipad Vertical Widgets Not Showing Properly

[virtual]

Hi All,

I have been troubleshooting some issues for a friend's site and am stumped by one problem which happens on iPad vertical or around 855px browser width. On the home page the widgets that pull in from different pages do not align properly at this width, a solitary widget gets stuck on the right by itself although they are all floated left. They are fine above and below this width. What am I missing.

The site is http://thecenterschool.com/

Thanks for any help

[falkencreative]

It is being floated properly, it's just getting "caught" on the middle column (see screenshot).

 

I'm not sure exactly how you handle that... perhaps adding a min-height to help standardize the heights of the blocks? Or adding multiple media queries, adding "clear:both" to the correct items as the layout changes?

[virtual]

Thanks for your quick response Ben. I had already figured that something was being pushed out of place but adding margin, padding and min-height did nothing.

 

I found the answer, thanks to Tony

Just as we both thought the problem is in the differing heights of the floated elements, so instead of floating he suggested:

 

display: inline-block;

vertical-align: top;

 

It works YAY