CODEWITHSUNDEEP
phphtmlcssstylingdynamic-css
warren
warren

Reputation: 33435

Dynamic resizing / repositioning of divs for multi-column viewing

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:

which leads me to:

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;
        }

Upvotes: 2

Views: 2271

Answers (4)

Pim Jager
Pim Jager

Reputation: 32119

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);
});

Which would set the column width dynamically.

For this to work your columns should have the class 'feed'

EDIT:

You should style your divs something like this:

.feed{
  float:left;
}

Upvotes: 0

Raithlin
Raithlin

Reputation: 1764

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.

Upvotes: 0

joh6nn
joh6nn

Reputation: 308

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.

Upvotes: 1

warp
warp

Reputation: 1578

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

Upvotes: 3

Related Questions