Topic: Boxs overlapping in Firefox (Page 1 of 1)

I have a page with 4 boxes. two on the right , two on the left. All of them are divs.
The two on the right are nested in a larger div.
This page looks great in IE, so that there is about a 10 px space between them all; but in Firefox 1 the box on the right slides under the box on the left.
All the box divs are set to "float: left;"
I tried setting the right boxes to "float: right;" , but it just moved them all the way over to the right.
Any suggestions greatly appreciated!

If the two boxes on the right are nested in a larger div, place that DIV first in your markup, and set it's style to "float:right"

I do not think you will have to worry about more floats after that.

Would have to see the code, and preferably the page in action.

float:right; is probably not what you want in this case. float:left for the containing box should work fine - depnds on your margins and other settings though.

The page is http://www.sunysccc.edu/academic/devstudy/tutorsys/index3.asp

I will try the float right thing too.

Thanks!

For starters, the page isn't close to validating -
http://validator.w3.org/check?verbose=1&uri=http%3A//www.sunysccc.edu/academic/devstudy/tutorsys/index3.asp

http://validator.w3.org/check?verbose=1&uri=http%3A//www.sunysccc.edu/academic/devstudy/tutorsys/index3.asp

Get all that fixed before you try fixing other things...

It's a little hard off hand to decipher what you've got going on...a whole lotta nesting going on...

It seems a little odd though to have all those 'clear:both;' declarations, and without digging too depp to verify, might very well be part of the problem - if you're telling something to float, and then clearing it where it shouldn't be cleared.

Like I said though - take care of those validation issues first. Usually helps fix half your problems right up front...