SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS vertical float

    http://andypbrowne.com/work/delicious_feed/index.php

    Test page linked above. These items are all the same width, but will vary in height as the data changes. I have seen some examples of this: http://www.ted.com/talks/browse (accomplished with flash), or notably flipboard ipad application.

    How do we make the list items float in vertically and still read from left to right? Hopefully it does not require any custom javascript.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The easiest way prob would be to just wrap each three floats in a div with overflow hidden (and overflow visible and height 1% for IE6). Alternatively you could clear left the last one in each row. I've had that not work in ie6 for me before though for whatever reason.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Don;t float them just use display:inline-block and then they won't snag (if that's what you meant ).

    Code:
    .link {
        /*float:left;*/
        display:inline-block;
        width:280px;
        margin:0 30px 0 0;
        padding:20px 0 10px 0;
        border-bottom:1px dashed #666666;
    vertical-align:top;/* or bottom if you prefer*/
    }
    * html .link{display:inline}/* ie6*/
    *+html .link{display:inline}/* ie7*/
    IE6 and 7 don't natively understand inline-block but the hack above accomplishes it because IE6 and 7 treat any inline element in haslayout mode as being inline-block.

  4. #4
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! This is very close to what I wanted. And I defiantly appreciate fixing the problem with one line of CSS.


Tags for this Thread

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
  •