Floating problem

HTML & CSS
1

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?

2

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.

3

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.

4

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

5

Hi,

thanks for this fix. It works!

6

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.

7

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