I'm not an HTML/CSS guru, but I do know my way around and I do try to use "semantic HTML" and CSS for styling wherever possible. I hate tables for layout, if for no other reason than they're a big mess and hard to read, and I do all my HTML by hand (or generated programmatically, e.g. by Markdown, Markaby, or Haml).
So I'm a little bit surprised that even lil' ol' dabbler me has more than once wished to put blocks together in an inline-like flow, e.g. for a photo gallery or other dynamic grid-based layout, and yet the big guys are content to fall back on tables. Maybe I can afford to be more puritanical as a hobbyist.
I dug into the issue once again, determined to finally grok the CSS box model
and view model once and for all. I don't know if I got that far, but I do
understand enough about display: block and display: inline to see why it
doesn't work the way I was hoping it would work. It boils down to a block
element will seek the left edge of its parent.
But, there *is* a way to do precisely what I want to do in CSS 2.1. It's called display: inline-block, and it says to layout block elements in the inline flow. If you're still lost about what I'm driving at, there's a nice live demo and screenshot of display: inline-block at quirksmode.org. Alas, IE and Gecko (Firefox, Mozilla, Camino, etc.) don't support this display mode. But in browsers that do (e.g. KHTML-based browsers like Konq and Safari), it's a thing of beauty.
So we need a workaround for Firefox and IE. You could revert to tables if you detect those browsers, but I like to keep the HTML unchanged. You could use float: left, and that works very well unless your blocks are different heights. So you can force your blocks to be the same height, and possibly use overflow: auto to give scrollbars as needed (or hide the overflow or let it just overflow or whatever).
So here's a little example. The blue blocks use display: inline-block and the green blocks use float: left.
.inlineblock {display:inline-block; border: solid blue; width:150px;margin:5px;} .floatleft {float:left; border: solid green; width:150px;margin:5px;}
ipsum
ipsum
Do play around with it by resizing your browser and dusting off that Konquerer or Safari browser to see how the blue blocks look when rendered correctly.
I think it's a crying shame that firefox doesn't render this properly. Maybe the complacent table-hugging masses haven't made enough noise. Let's make some noise.
While I'm on the subject, I highly recommend css_browser_selector.js method of doing browser-specific CSS.