Dynamic resizing / repositioning of divs for multi-column viewing

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?

Thanks!

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

Answer 2

you might be able to do this with lists; i've never tried it, so i'm not sure.

if you make list items display:inline, the list becomes horizontal instead of vertical. from there, if you stuff the list into a containing element and fiddle with the padding and margins, you may be able to get the list to line-warp, like text: again, i've never tried that, so i don't know.

if this technique works, i'd be very interested to hear about it.

Answer 3

Check out: http://jx.myofiz.com/

Answer 4

The only way I can think of is a mixture of dynamic CSS and javascript. Every time a column (feed) is added, use the javascript to rewrite the width (in percentage) of each div.

jQuery would come in handy here.

var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");

Someone feel free to correct me if I'm wrong. My jQuery is a little wobbly.

Of course, if you're not using AJAX, you could implement the same solution entirely in PHP.

Answer 5

Hi warren,

You could also use this jQuery javascript (you will need the jQuery library).

var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
     $(this).width(colWidth);
});

Wich would set the collum width dynamicly. For this to work your collums should have the class 'feed'

EDIT: You should style your divs something like this:

.feed{
  float:left;
}

Answer 6

I have for a while now been looking for an excuse to use the columnize plugin for jQuery. Pure CSS/HTML joy it is not, but it looks like it could hold the answer for you.

Check it out: http://www.systemantics.net/en/columnize

Cheers!

-CF