Question

Setup

I have a website that draws RSS feeds and displays them on the page. Currently, I use percentages on the divs that contain each feed, so that multiples can appear next to each other.

However, I only have two next to each other, and if the window resizes, there can be some ugly empty space on the screen.

Desire

What I’d like to be able to do, but have not figured out a way yet, is to put all the feeds linearly into the page, and have:

• a ‘pre-built’ multicolumn view where the feeds would ‘balance’ themselves into the columns

which leads me to:

• the number of columns change depending on how wide the screen is currently\

This is akin to how word processing applications handle columnar layouts.

Question

I presume that I will need to implement some form of AJAXy happiness, but currently know very little about Javascript.

Is there a way to do this with just CSS/HTML/PHP?

If not, how should I go about solving this?

final solution:

(based on @warpr‘s and @joh6nn‘s answers)

#rss         {min-width: 10em;         max-width: 25em;         min-height: 15em;         max-height: 25em;         font-size: .97em;         float: left;         } 

Answer 1

You probably cannot get what you want with just CSS/HTML, but you can get somewhat close.

A trick I used for a photo album is this:

1. Make sure each feed has a fixed width, I would recommend something like ’20em’;
2. Make sure each feed has the same height.
3. Float everything left.

Because each div has the same dimensions, when they’re floated left they will form a grid with exactly the number of columns that will fit in your browser.

Unless you actually fix the height of the divs and use CSS to clip the content, you will need javascript for step 2, what I did was:

1. Iterate over each feed div, finding the tallest div.
2. Iterate over each div again, changing the height to match the div found in the first step.

This is fairly easy to implement, but is obviously not optimal. I look forward to reading any better solutions posted here 🙂