SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    challenge: make irregular-height floats behave like equal height floats

    ...without changing the height of the elelements

    My goal is to make attached screenshot number 1 look the same as attached screenshot number 2.

    The "broken" version just has a set of floated elements with fixed widths. The problem is the floated elements jump up when an element in the row above it becomes higher than the elements after it in its own (visual) row.

    In the fixed version I added clear:left to the first element in each visual row. There are no tags to wrap the rows.

    I've been unable to come up with a way for the floats to stop popping out of the row. I guess it's just the way that floats are designed but that doesn't prevent me from trying to hack it

    any ideas?

    I attached a zip file with the html/css I used to make the screenshot. If you open the page and it doesn't look broken, make your browser window narrower and it will break.
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Your attachments aren't approved yet so I may be barking up the wrong tree ... but could you use display:inline-block here instead of float?

  3. #3
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx. I tried this and it didn't seem to server a reliable way to build a layout. Are my attachments approved now?

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    You could put
    Code:
    .grid-new-row {clear:both;}
    That will put any new row item below all other floated items before it, not just against the left margin.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Stevie said use inline-block for a more robust layout otherwise you will not be able to clear the previous row in IE7 and under unless you have an element that spans 100% width and is set to clear:both. Adding clear both to the first item of each row doesn't work in ie7 and under because subsequent floats still snag.

    Display:inline-block gets over this problem perfectly but does mean that you have to allow for the whitepsace nodes between elements though.

    IE6 and 7 need the following hacks to make inline-block work.
    Code:
    .grid-100
    ,.grid-3-4 /* Read the dash as a slash so 3/4 (3 quarters, or 75% */
    ,.grid-2-3
    ,.grid-1-2
    ,.grid-1-3
    ,.grid-1-4
    ,.grid-1-5
    ,.grid-1-6
    ,.grid-1-7
    ,.grid-1-8
    ,.grid-1-12
    ,.grid-phi
    ,.grid-phi2 /* This means phi^2 (phi squared) */
    ,.grid-phi3 {
    /*float:left;*/
    word-wrap:break-word; /* This will only break words if they are so big they otherwise go off the grid */
    display:inline-block;
    vertical-align:top;
    }
    * html .grid-100
    ,* html .grid-3-4 /* Read the dash as a slash so 3/4 (3 quarters, or 75% */
    ,* html .grid-2-3
    ,* html .grid-1-2
    ,* html .grid-1-3
    ,* html .grid-1-4
    ,* html .grid-1-5
    ,* html .grid-1-6
    ,* html .grid-1-7
    ,* html .grid-1-8
    ,* html .grid-1-12
    ,* html .grid-phi
    ,* html .grid-phi2 
    ,* html .grid-phi3 {
    display:inline;
    }
    *+html .grid-100
    ,*+html .grid-3-4 /* Read the dash as a slash so 3/4 (3 quarters, or 75% */
    ,*+html .grid-2-3
    ,*+html .grid-1-2
    ,*+html .grid-1-3
    ,*+html .grid-1-4
    ,*+html .grid-1-5
    ,*+html .grid-1-6
    ,*+html .grid-1-7
    ,*+html .grid-1-8
    ,*+html .grid-1-12
    ,*+html .grid-phi
    ,*+html .grid-phi2 
    ,*+html .grid-phi3 {
    display:inline;
    }
    Some example using inline-block instead of floats:

    Untitled Document
    Untitled Document
    Captions

  6. #6
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Display:inline-block gets over this problem perfectly but does mean that you have to allow for the whitepsace nodes between elements though.
    ]
    Hi Paul, what do you mean here? Im using my grid system in a CMS and there's definitely going to be a lot of spaces between tags in the code, will these spaces break the layout?

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

    When you use inline block you get the whitespace in the html being taken into account (like the space between words). Usually this is not a problem unless you have accounted for every single pixel across the width or need to make an exact fit.

    I tried it out on your layout and it seems to do what you want but of course I may not see the finer detail in that zip.

    There are ways of closing the gap but best avoided for simplicity.

    Using inline-block is the only way to have neat lines of irregular blocks. It can't be done with floats unless you put a 100% wide element at the start of each row and set it to clear:both which of course is impossible for a fluid width page as the number of elements per row will vary.

    You can see how well it works in the links I gave above.


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
  •