Hello all,

can anyone think of a way to approach converting the following scheme into a non-table html layout?

alt text

A few things worth mentioning, perhaps.

  • Only the central block is mandatory (and should turn into a normal square block if it is the only one there).
  • The total number of blocks is unpredictable, so layout should be easily expandable (and hence non-table).
  • Exact left alignment of the text in all blocks is not crucial.
  • No gaps other than shown are allowed
  • Gray background can be semi-transparent, so no overlap is allowed too.

Thanks in advance!

2 answers


Since those are really just a bunch of clipped boxes, you could do it quite easily with CSS clipping, and that would also make it quite simple to align the text, but that's not going to work across browsers. If it were me, I'd make a more simple layout for dumb browsers (IE, old FF, etc.), then use clipping to make the fancy layout you're going for in modern browsers. It's just not worth it to kludge together a solution to this problem in an old IE - if you absolutely must do this and make it work in IE6, you've got to split this thing into a ton of small boxes and intricately lay them out, but that's going to just take time and creativity, and you'd likely be better off with tables at that point.

Answered over 8 years ago by John Bragg
palhmbs 65

I suggest you use the position:absolute; and z-index attributes to position everything from the left.

Answered over 8 years ago by palhmbs
  • I have just tested it in Opera, Google-Chrome and Firefox, unfortunately Firefox's beta 9 doesn't scale the boxes well, not tested in IE9 or IE6. palhmbs over 8 years ago