CSS columns and several loops

Ok.. I guess I have to use tables…

No you don’t have to use tables.

In template

<div class="columns">
1st loop here
</div>
<div class="columns">
2nd loop here
</div>
<div class="column-end">
3rd loop here
</div>

In style.css – add these and change widths accordingly

.columns { float: left; width 200px; margin-right: 20px; }
.column-end { float: left; width: 300px; }

mercime: Thanks for your suggestion, but the result were as before: one long column.

You might consider using the 960 grid (https://960.gs).

I recently had the same challenge when building a theme, but it was only one loop.

https://demos.simplethemes.com/evenflow/wp/category/3col

<div class="container_24">
<div class="grid_8">
1st loop..
</div>
<div class="grid_8">
2nd loop..
</div>
<div class="grid_8">
3rd loop..
</div>
</div><!--/end container-->

Thak you for your suggestion simplethemes! A really helpful site. But it still gets f***ed up. I guess it is something wrong with the style implementation into my custom querys. Here is the first query (of three):

<div class='container container_3'>
<div class='grid_1  suffix_2'>
<h3>query nr 1:</h3>
<?php
   $cool = new WP_Query('gdsr_sort=rating&sort_order=desc&cat=5&posts_per_page=5');
	while ($cool->have_posts()) : $cool->the_post();
   $post_image = get_post_meta($post->ID, 'image', true);
   $post_alt = get_post_meta($post->ID, 'alt', true);
?>

<h2><a href="<?php the_permalink() ?>"  rel="bookmark" title="Permanent url to <?php the_title(); ?>"><?php if (strlen($post->post_title) > 20) {
echo substr(the_title($before = '', $after = '', FALSE), 0, 20) . '...'; } else {
			the_title();
			} ?></a></h2>
<?php if($post_image !== '') { ?>
<a href="<?php the_permalink(); ?>" title="<?php if($post_alt !== '') echo $post_alt; else the_title(); ?>"><img src="<?php echo $post_image; ?>" alt="<?php if($post_alt !== '') echo $post_alt; else the_title(); ?>" style="width:250px;height:190px; " /></a>
<?php }
	else {
	echo 'missing image';
	}
?>

<?php echo '</div>'; endwhile; ?>
<div class='clear'>&nbsp;</div>

ThorHammer – are you working on the site your username is linked to? Did you refresh browser after you made changes to your template file and style.css when you tried my fix? Did you upload 960 css folder and link to it via @import in your theme’s style.css when you tried simplethemes’ fix?

Mercime: No, it is on another site template I am working on. Yes, I refreshed the browser, and no, I only embeded the CSS needed, as I found in the three columns example.

In the end, it turned out to be impossible to solve this with CSS. I had to dig in the ground and recover some stone age tables. then it worked. Like a charm. What a pity…But who cares, as long as it works as it should. After all, it is not forbidden to use tables.

Sometimes CSS just doesn’t do what you want it to. I’ve been through that so many times. ?? It’s funny, because I had to resort to tables as well. Had issues with a 3 column template, but the columns would never be even- one would always be shorter than the other two or vice versa. Thank goodness for basic HTML.

wildfremd: Yes, but really, as long as the output becomes as it is supposed to do, and as long as the code validates perfect, then it really is no problem at all. Ok, tables is really old fashion, but as long as it does the job -what the heck is the problem. If we freeze and the electricity is out, we have to light up in the fireplace. The heat will save us. In both ways ??

Yeps! There’s a fix for everything. ??