html - Display 3-column layout with variable-height content in fixed height box? -

this not usual 3-column layout question :-)

so imagine classified ads section in newspaper (remember those?)... have design have fixed-size box on screen (say, 600x200), divided in 3 columns, tweets displayed in each column. tweets start fill first column , keep stacking in first column until come tweet no longer fits, bumped next column.. etc.

here's mockup of i'm after (i had erase name on each tweet idea):

it's tricky since goal fit many tweets possible box don't know how tall each tweet be... 1 word, 140 characters using caps take lot of space. enclosing box same size , can't change. need kind of smart "flow" knows when move next column , fill in available space. there way in css/html?

using css, columns appear best way.

demo

html

each tweet pair of <strong> usernames, , <p> tweet bodies. change these whatever like, make sure change css match.

<div class="threecol"> <strong>@someone</strong> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae.</p>   <strong>@nextuser</strong> <p>...</p> </div> 

css

this css container. other specificiations (width, height, hidden overflow) adds column settings.

.threecol {   height: 200px;   width: 600px;   margin: auto;   overflow: hidden;   -webkit-column-count: 3;   -moz-column-count: 3;   column-count: 3; } 

this style want tweets fall line @names.

p {   display: inline;   width: 30%; } 

this causes line break between <p> , following tweet.

p:after {   display: block;   content: '';   margin: 10px 0; } 

browser compatibility

for simple setup, should work fine on browsers. old browsers, they'll have stacked, still okay, , show many tweets.

problems

1. a tweet cut cut off if wraps (hidden) fourth column.
2. jquery reports incorrect top/left , (seemingly incorrect) width/height elements in columns.
3. this based on draft of w3 standard, , syntax subject change. said, won't change @ point.

alternatives

you search masonry plugin, , hide elements bottom below container's bottom. best solution fixed height containers.