View Full Version : Odd float problem in Firefox, not in IE

09-21-2006, 12:23 AM
Hi all

I'm putting together a shopping site at the moment - beta version at www.rainjam.com/psd_new/index.php. On a list page (eg www.rainjam.com/psd_new/category.php?c=3) the "50g - Buy Now" bits are in code like this:

<br class="br_clearboth" />
[clear: both to force new line ]

<div class="rightfloat">
<form method="post" action="addToBasket.php">
[ ... "add to basket" form - float: right. The whole form plus containing div is generated by a function that's used elsewhere on the site and in different layouts - don't want to complicate things if at all possible]

<div class="div_subvar_det_listpage">
[... price and size info goes here - float: right ]

<div class="div_swatch_img">
[ small swatch image for different colour variants - also float: right]

<br class="br_clearboth" />
[ new line as before]

For some reason, these three divs float over the end of the containing div in Firefox - this can be clearly seen on the page above about halfway down. This doesn't happen in IE, possibly because its CSS interpretation's more forgiving? I don't know - I've been looking at this for a couple of days and not having any ideas. I'm suspicious about a couple of things, though, such as the fact that the three divs are declared in reverse order because they're all set to float: right. I want them right-aligned (the way it looks in IE would be great), and this way of achieving that seems to be the way it's ended up, but it's probably not the best way to do it... any help gratefully received with virtual high fives...

09-21-2006, 04:08 AM
Don't use a br to clear the floats. Use a div with clear:both; or better yet read this www.positioniseverything.net/easyclearing.html