Floating problem


for some weird reason I can’t get the floating to work in Firefox (Win & Mac) and IE: site link. It’s based on ZURB’s Foundation.
In Chrome it looks ok.

Any advice?

Hi Jammmy,

The problem is the first box in your row is slightly longer than the rest of the boxes, your best bet would be to wrap each row in their own <div class=“row”></div> container which will clear the extra spacing created by these longer elements.

Or you could use inline-block instead of floating and avoid the snagging issue although you have to add hacks for ie6/7.

*display:inline;/* ie6/7 hack for inline-block*/
margin-right:-2px;/* white space hack*/

There is a white-space issue with inline-block but usually it doesn’t notice when elements are spaced out anyway.

Foundation doesn’t have support for IE 6-7 as it makes use of box sizing.


thanks for this fix. It works!

Ah ok:) I usually include the IE hacks for inline-block just in case anyone else is watching and needs older support. However I think we are getting to the point now where IE7 support can be dropped.

Agreed, at work we have just dropped all support for IE7 with our major client.