Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Thanked 0 Times in 0 Posts

    Odd float problem in Firefox, not in IE

    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...

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    In a place far, far away...
    Thanked 1,043 Times in 1,019 Posts
    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


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts