CODEWITHSUNDEEP
htmlcsscss-floatmultiple-columns
Eric
Eric

Reputation: 5215

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):

enter image description here

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?

Upvotes: 3

Views: 1290

Answers (1)

Brigand
Brigand

Reputation: 86260

Using just CSS, columns appear to be the best way.

demo

screen shot of demo link, tweets in three columns

HTML

Each tweet is just a pair of <strong> usernames, and <p> tweet bodies. Change these to whatever you like, but make sure to change the CSS to 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 is for the container. Other than your specificiations (width, height, hidden overflow) it just adds the column settings.

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

This is just for your style where you want the tweets to fall into line with the @names.

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

This causes a line break between a <p> and the following tweet.

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

Browser Compatibility

For this simple setup, it should work fine on most browsers. For old browsers, they'll just have everything stacked, which will still look okay, and show almost as many tweets.

tweets being stacked, when columns are disabled

Problems

  1. A tweet could cut be cut off if it wraps into the (hidden) fourth column.
  2. jQuery reports incorrect top/left and (seemingly incorrect) width/height for elements in columns.
  3. This is based on a draft of a W3 standard, and the syntax is subject to change. That said, it probably won't change much at this point.

Alternatives

You could search for a Masonry plugin, and hide elements whose bottom is below its container's bottom. Probably the best solution for fixed height containers.

Upvotes: 5

Related Questions