Floating problem

[Jammmy]

Hi,

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?

[chris.upjohn]

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.

[Paul O'B]

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

.four.columns{
display:inline-block;
*display:inline;/* ie6/7 hack for inline-block*/
float:none!important;
width:33%;
vertical-align:top;
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.

[chris.upjohn]

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

.four.columns{
display:inline-block;
*display:inline;/* ie6/7 hack for inline-block*/
float:none!important;
width:33%;
vertical-align:top;
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.

[Jammmy]

Hi,

thanks for this fix. It works!