Dynamically resizing / moving div for multi-column view
Setting up
I have a site that draws RSS feeds and displays them on a page. I currently use percentages on divs that contain each channel, so the multiples can appear next to each other.
However, I only have two adjacent to each other, and if the window resizes, there might be some ugly blank space on the screen.
A wish
What I would like to do, but haven't figured out the path yet, is to put all channels linearly in the page and have:
- a "pre-built" multi-column view in which feeds will "balance" themselves in columns
which leads me to:
- the number of columns changes depending on how wide the screen is at the moment \
This is similar to how word processing applications handle columnar layouts.
Question
I guess I will need to implement some form of AJAXy happiness, but I don't know much about Javascript at this time.
Is there a way to do this with just CSS / HTML / PHP?
If not, how do I solve this?
final solution:
(based on @warpr and @ joh6nn answers)
#rss
{min-width: 10em;
max-width: 25em;
min-height: 15em;
max-height: 25em;
font-size: .97em;
float: left;
}
source to share
You probably can't get what you want with CSS / HTML alone, but you can get a little closer.
The trick I used for the photo album is this:
- Make sure each channel has a fixed width, I would recommend something like "20em";
- Make sure each channel is the same height.
- The float remained.
Because each div is the same size, when moved to the left, they form a grid with exactly the number of columns that will fit into your browser.
Unless you really lock the div height and use CSS for the clip, you need javascript for step 2, which is what I did:
- Iterate over each feed div, finding the tallest div.
- Repeat over each div again, changing the height to match the div found in the first step.
This is fairly easy to implement, but obviously not optimal. I look forward to reading any of the best solutions posted here :)
source to share
you can do this with lists; I've never tried it, so I'm not sure.
if you show list items: inline, the list becomes horizontal instead of vertical. from there if you write the list to the contained element and script with padding and fields, you can get the list to warp string like text: again, I've never tried that, so I don't know.
if this technique works I would be very interested to hear about it.
source to share
I've been looking for an excuse for using the columnize plugin for jQuery for a while now. Pure CSS / HTML joy is not, but it looks like it might contain an answer for you.
Check it out: http://www.systemantics.net/en/columnize
Hooray!
-CF
The only way I can think of is a mixture of dynamic CSS and javascript. Every time a (feed) column is added, use javascript to overwrite the width (percentage) of each div.
jQuery comes in handy.
var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");
Someone can correct me if I am wrong. My jQuery is a little shaky.
Of course, if you are not using AJAX, you can implement the same solution entirely in PHP.
source to share
You can also use this jQuery javascript (you need the jQuery library).
var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
$(this).width(colWidth);
});
which will dynamically set the column width.
To do this, you must have a 'feed' class in your columns
EDIT:
You should set up your divs something like this:
.feed{
float:left;
}
source to share