Small CSS issue with overlapping

Discussion in 'CSS' started by CarlBlogger, Aug 8, 2013.

  1. #1
    Hello all,

    Please take a look at http://www.baitzone.com/new/products/

    Basically when I'm adding titles that are quite long '
    BaitZone Ready To Fish Groundbait (Brown)'

    This is causing the next row to skip to the right as you can see. Unless I make the font like 6px (unreadable) it doesn't display properly. Can you please help me out with a fix for this ?

    I'm sure it's nothing too complicated... I just can't fix it :(
     
    CarlBlogger, Aug 8, 2013 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Two things: First, your structure is wrong. You have a list of products and it should be marked up as an unordered list. Second, the issue you have is inherent in using floats. Even one pixel is enough to block a float from sliding over.

    For an explanation and coding example, see Inline block galleries. Ignore the browser incompatibility sections; this was written a long time ago and even IE is good now.

    cheers,

    gary
     
    kk5st, Aug 9, 2013 IP
  3. CarlBlogger

    CarlBlogger Well-Known Member

    Messages:
    516
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    130
    #3
    Hi Gary,

    Thanks for your help. I'll have a look at that link and correct it.

    Carl
     
    CarlBlogger, Aug 9, 2013 IP