CSS flexible layout

[johnsmith153]

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.

[ralph.m]

Instead of floating the boxes, you could try this:

.box {
  display:inline-block; 
  vertical-align: top;
}

[johnsmith153]

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.

[ralph.m]

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.

.box {
  display: inline; /* for sucky old IE */
  display:inline-block; 
  vertical-align: top;
}

[johnsmith153]

Brilliant. Thanks for the help (again). I thought this was going to be a big problem.

[Paul O'B]

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.

.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:

.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:

.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.

[ralph.m]

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.

[johnsmith153]

Thanks to everyone.