SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    auto height on floats

    hi guys

    quick question i have some floats floating side by side and they work fine but when i add too much text into one box the box beneath it does not float directly under it, i am adding a screen shot of the problem, the floats are outlined to help you see what is going on

    http://i40.tinypic.com/zul1de.jpg

    here is my css

    Code:
    .floaty {
    width: 247px;
    float:left;
    padding-right: 10px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    }
    
    .floaty img {
    border: #8f0c12 2px solid;
    }

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

    Floats float as far as they can one way or the other from where they are. If something is in the way they snag on it which is what is happening in your example above.

    You would need to set exact heights on every float (and hide the overflow for IE6) if you want then to align automatically in rows.

    If you want different height floats then you will need to either float them in pairs and then set a clearing element after every second float so that a new row starts. It is no good just adding clear:both to the third float because the fourth float would still snag.

    Or alternatively us inline-block instead of floats although it is a little more complicated and requires hacks for older browser support.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's how floats work. A box that has float:left will be shifted as far to the left as it can go. That means until it reaches the padding edge of the parent or until it bumps into another float (which is what happens in your case).

    You can add clear:left to the box to make it drop below the taller one, but that requires you to know which ones will be taller and which ones will go below them.

    Edit:

    Too late, as usual.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    My husband ran into this recently with a list of addresses of varying heights. These were li's inside a ul. What we did was give them all a min-height in em units, and height to IE6, so that snagging stopped and also if text was enlarged the height wouldn't cut off content.

    Paul, do you have a version of inline-block but with differently-heighted containers?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    My husband ran into this recently with a list of addresses of varying heights. These were li's inside a ul. What we did was give them all a min-height in em units, and height to IE6, so that snagging stopped and also if text was enlarged the height wouldn't cut off content.
    You would still need to ensure that the height was greater than you ever need otherwise it would still snag

    Paul, do you have a version of inline-block but with differently-heighted containers?
    There's this one although its a couple of years old.

  6. #6
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh rite...i just specified a height to it...im not the one who will be adding content to the floating boxes so hmmmm

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul
    You would still need to ensure that the height was greater than you ever need otherwise it would still snag
    Yes this is what we did... looked at the longest address and measured its height, and used that as our min-height.

    mari, that you are not the one adding the content, that may be a problem unless you know the maximum height allowed. Or maximum number of characters.

    If you don't know this max height, then another solution might be necessary...
    would display: table be possible here without adding a ton of classes to the HTML?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    would display: table be possible here without adding a ton of classes to the HTML?
    No because table cells can't wrap to another line (and IE7 doesn't support display:table anyway).

    The inline-block solution is the best solution for variable height adjacent containers that wrap to many lines.


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
  •