Display 3-column layout with variable-height content in fixed height box?
THIS IS NOT THE USUAL 3-COLUMN LAYOUT QUESTION :-)
So imagine the classified ads section in a newspaper (remember those?)...
I have a design where I have a fixed-size box on the screen (say,
600x200), divided in 3 columns, with tweets displayed in each column. So
the tweets would start to fill the first column and they would keep
stacking up in the first column until we come to a tweet that no longer
fits, so it would be bumped to the next column.. etc.
Here's a mockup of what I'm after (I had to erase the name on each tweet
but you get the idea):
It's tricky since the goal is to fit as many tweets as possible into the
box but I don't know how tall each tweet will be... it could be one word,
it could be all 140 characters using all caps which would take a lot of
space. The enclosing box is always the same size and can't change. So I
need some kind of smart "flow" so it knows when it move to the next column
and fill in all available space. Is there any way to do this in CSS/HTML?
No comments:
Post a Comment