SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Severe problem with floated div's

    We're floating product divs so they look somewhat similar to a table of products and have run into a major snag:

    http://www.2bigfeet.com/mens_work.php

    What could cause this to display so erratically? We tested the design but apparently didn't test well enough, because we never saw this problem.

    Thanks

  2. #2
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Grand Rapids, Michigan
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    set the div.product to have an explicit height, and make sure there's enough room for the image and text in there. once they're set to an explicit height, the floating will not get caught on a snag (it looks like one of the div.product's is taller, so the float is getting stuck on the extra part of that).

    Code:
    |----||----|
    |    ||    |
    | aa || bb |
    |    ||----|
    |----||----|
          |    |
          | cc |
          |----|

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by punkguitar
    That would be might thoughts also
    A floated element will float as far to the left or right and as high as it can without rising up. So when it wraps at the end of the line it will float against any overhang it finds.

    Therefore you will need to follow punkguitars suggestions and even out the heights etc.

    Paul


Bookmarks

Posting Permissions

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