Problem in FF with two floated columns

Discussion in 'HTML & Website Design' started by blaiseymae, Mar 11, 2009.

0
  1. #1
    I am having a problem using float:right for a column. Here is a link to the site.

    http://beta.lpb.org

    It looks right in IE but won't clear the left div in FF. I have tried the clearfix hack with no luck. I have narrowed it down to the slideshow box. If I remove it, surprise, everything floats as it should. I have tried everything I can think of. So I am hoping to find a hero here.

    Much thanks, in advance! :confused:
     
    blaiseymae, Mar 11, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    clearfix solutions are usually for IE so I'm surprised you are using one for FF. IE has problems with floats. FF does not. Never look to IE for how things should work.

    The validator says you are missing ending semicolons in your CSS in #bottom but I can't seem to find them yet.
     
    drhowarddrfine, Mar 11, 2009 IP
  3. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #3
    I notice you are using 'display:table'. Are you aware that only works in modern browsers and not IE?

    EDIT: Now I'm confused cause I'm not sure what is supposed to be on the right hand side. Why are you using spacer divs? That died with the Dodo. That's what CSS is for. Also, you are clearing floats but they are next to floats you want on the right hand side. It's getting a little bizarre.

    EDIT: I see where I might be getting messed up. You're mixing inline styles with your external stylesheet. That makes debugging more difficult.
     
    drhowarddrfine, Mar 11, 2009 IP
  4. Aatu

    Aatu Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Not sure why is #right clearing left, if you want it next to an element floating left? I assume the wanted result is #right floating next to #left so:

    Your #container needs to be display:block instead of table
    #Right clear:none
     
    Aatu, Mar 11, 2009 IP
  5. blaiseymae

    blaiseymae Guest

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You are all correct. Alot of the extraneous tagging is from me trying just about anything to make the right column float right in firefox. As for "Now I'm confused cause I'm not sure what is supposed to be on the right hand side", I would like it to display in FF the way it does in IE. I'm going to get into it fresh this morning. Maybe I was just too tired. I am also taking all my inline style and moving it to my stylesheet.

    When I figure it out, I will post. Thanks all :)
     
    blaiseymae, Mar 12, 2009 IP
  6. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #6
    I didn't have IE available last night when I looked at it. In any case, make sure you are using Firefox as your test bed. Using IE will only screw you up.
     
    drhowarddrfine, Mar 12, 2009 IP
  7. olddocks

    olddocks Notable Member

    Messages:
    3,275
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    215
    #7
    use clear: both on two floating divs

     
    olddocks, Mar 12, 2009 IP