SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist JordashTalon's Avatar
    Join Date
    Dec 2008
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Clear left if it's wider then container in CSS

    I have a fiddle to demonstrate the problem I'm trying to solve:

    http://jsfiddle.net/JordashTalon/DgP7J/11/

    As you can see in the first row the third column is aligning to the right (because the column on the farthest left is taller then the column immediately to the right of it).

    I know if I do a clear: both; after the 2nd column to get the final column to float all the way to the left, but since I'm trying to do more responsive design it would be best if I could do it without clears (since if the container became big enough I would want the column to come up flush with the rest of the columns instead of clearing).

    Does anyone know how to solve this problem? I hope it made sense.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I'd not add any floats at all when you have the total layout being a mere 500 pixels wide. Instead, I'd look for breaking points in your design, e.g. if a viewport is wider than n pixels, then add a float and work your way up to the biggest viewport you want to support.

    Here's a nice article that may help: http://www.netmagazine.com/tutorials...ponsive-design
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Instead of float: left, use display: inline-block:

    Code:
    .column {
        width: 205px;
        border: 1px solid red;
        display:inline-block;
        min-height: 90px;
    }
    I'm a real fan of inline-block these days.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Evangelist JordashTalon's Avatar
    Join Date
    Dec 2008
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I love Inline-Block too but it doesn't work in IE7 unfortunately

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by JordashTalon View Post
    I love Inline-Block too but it doesn't work in IE7 unfortunately
    Yep, but there's an easy workaround for it in IE7. I keep messing up the explanation, though, so I'll let Paul O'Brien explain it for you instead.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •