CSS question: 3 columns, repeating rows

This is sort of a variation on this:
http://www.glish.com/css/7.asp

But what I need to do is have a row of three columns, preferably nestled inside a fixed-width but variable-height container div.

  • the left column is fixed at 50 pixels width, variable height
  • the center column is fixed at 306 pixels wide, also variable height
  • the right column is fixed at 40 pixels, and I know the contents will always be 40 high as well.

The container div is 396 pixels wide, and can stretch to accommodate.

What I can’t figure out is a good way to set those, and allow them to be repeatable as a row – so the same three columns will be displayed as a set for each row, with nothing trying to get out of alignment, and with the top and bottom of each row being clearly defined and aligned across all three, with the inner content of each row aligned to the top.

Does that make any sense? :P

Look at Facebook’s Wall app for an example. This code will be used here:
http://www.facebook.com/apps/application.php?id=2439406894&b
The left column is for the image icon, the center is for the text, and the right is for the button. The user’s icon image varies in height but has fixed width.

I suck at CSS. This is my third facebook app. The other two are http://urltea.com/nda and http://urltea.com/ppj

Hmm. All three of your apps look like login dialogs. Not very impressive, Ciparis.

Ciparis: the “main” change you had to do to that example, for it to work barely was to change the content divs from IDs to Classes.

An ID can only occur once in a web page, while a class can occur multiple times. This is the main thing to have in mind when you want to show repeatable stuff.

I altered the glish.com example to what you described, should be working in both mozilla & internet explorer: http://www.derangedhermit.com/files/ciparis/

edit: If you want a good book about “beginner” CSS design, Zeldman’s Designing with Web Standards is GREAT. (Also Dan Cederholm “Web Standard Solutions” is a handy companion to Zeldman’s book.)

For those just tuning in, wumpus is on an anti-login crusade :P

(i still love your blog btw)

Sorry, wumpus :) that’s a facebook thing. No idea why you can’t view the application directory without first logging in… would love to hear what you think about the apps though!

André: thank you! I’ll definitely pick up those book recommendations.

m.