SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS flexible layout

    This is a very simple layout (please look at the source or test at all browser widths from as small as possible to more than 1000px):
    http://page-test.co.uk/layout1.html

    However, if I vary the amount of content then I get this:
    http://page-test.co.uk/layout2.html

    ...please particularly look at when the browser is 480-1000 pixels wide on layout2.html.

    What's the best way to deal with this assuming the content can be varying levels (e.g. the content may be forum posts or from a DB so you can never know the exact length of it)?

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,115
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Instead of floating the boxes, you could try this:

    Code:
    .box {
      display:inline-block; 
      vertical-align: top;
    }
    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."

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph,

    I've put that in at layout3.html and it looks good.

    Are there any downsides to doing it this way? Obviously it works with my example, but I'm guessing somewhere this would break (e.g. on a proper site where there's a lot more content). The idea is to use a grid layout like this for an entire site so as to support all screen sizes (including mobile).

    What kind of problems could I come across along the way? I just like to cover all bases to save any problems in the future. I suppose this solution seems too good to be true!

    Also, is inline-block supported by all browsers (including mobiles)? I'm sure I've heard of problems with inline-block somewhere.

    Thanks again.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,115
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Inline-block is fantastic, and better than float in a lot of respects. I use it a lot now, and this will work fine in any page environment, really. IE7 and under don't recognize it, though, but you can fix that by giving them display: inline instead.

    Code:
    .box {
      display: inline; /* for sucky old IE */
      display:inline-block; 
      vertical-align: top;
    }
    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."

  5. #5
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant. Thanks for the help (again). I thought this was going to be a big problem.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Inline-block is fantastic, and better than float in a lot of respects. I use it a lot now, and this will work fine in any page environment, really. IE7 and under don't recognize it, though, but you can fix that by giving them display: inline instead.

    Code:
    .box {
      display: inline; /* for sucky old IE */
      display:inline-block; 
      vertical-align: top;
    }
    Hey Ralph you need to give the inline rule in a separate rule otherwise IE7 and under just get inline-block which does nothing more than apply haslayout to block elements.

    You need to do this:

    Code:
    .box {
      display:inline-block; 
      vertical-align: top;
    }
    * html .box{  display: inline; /* for sucky old IE6 */}
    *+html .box{  display: inline; /* for sucky old IE7 */}
    Or if you don't mind proprietary css and an invalid hack then do this:

    Code:
    .box {
      display:inline-block; 
      vertical-align: top;
     *display:inline;/* for sucky old IE6 and 7 */
     zoom:1.0;/* for sucky old IE6 and 7 */
    }
    IE7 and 6 natively understand inline-block on inline elements so no special rules are needed but for block elements you need to set them to inline and then give them haslayout and then they will behave as inline-block.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,115
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    you need to give the inline rule in a separate rule otherwise IE7 and under just get inline-block which does nothing more than apply haslayout to block elements.
    Ah, thanks for setting me straight, Paul.
    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."

  8. #8
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to everyone.


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
  •