Hey Peter,
Try this and see if it helps:
At the end of each loop add:
<div class="clear"></div>
The CSS for this would be:
div.clear { clear: both; }
Basically what’s happening is the id of product is stacking because of the left float.
You should also look into changing the id product to a class of product. Check out this article from Chris Coyer on the topic of ID vs Classes: http://css-tricks.com/the-difference-between-id-and-class/
please post the full code of the template with the multiple loops; http://codex.wordpress.org/Forum_Welcome#Posting_Code
Thread Starter
Peter
(@peterbatchelder)
Hi Allen, what a huge help! That solved it. Thanks very much. And thanks for ID/Class links. Though I know the difference, I admit to defaulting to ID. Will read it through.
Alchymyth, thanks for offer to looki at code. Here’s the hack I pulled together. Works fine, but probably a messy, uneconomical way to do it. Any suggestions you have will be welcomed.
<?php
/**
* Template Name: Product Grid Page
*
*/
get_header(); ?>
<div id="fullwidthholder">
<?php $args = array(
'posts_per_page' => 100,
'category_name' => 'Product',
'paged' => get_query_var('paged')
);
$product_posts = new WP_Query( $args );
if( $product_posts->have_posts() ) :
while ( $product_posts->have_posts() ) : $product_posts->the_post(); ?>
<div id="product">
<?php {
the_title('<div id="producttitle">', '</div>');
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '" rel="lightbox">';
the_post_thumbnail('thumbnail') ;
echo '</a>';
};
the_content('<body>', '</body>');//add here what you want to output per post/product// ?>
</div><!-- .product Category "Product" _________________________________________________-->
<?php endwhile;
endif; wp_reset_postdata(); ?>
<div class="clear"></div>
<br>
<!--RUGS PRODUCT CATEGORY-->
<?php $args = array(
'posts_per_page' => 100,
'category_name' => 'ProductRugs',
'paged' => get_query_var('paged')
);
$product_posts = new WP_Query( $args );
if( $product_posts->have_posts() ) :
while ( $product_posts->have_posts() ) : $product_posts->the_post(); ?>
<div id="product">
<?php {
the_title('<div id="producttitle">', '</div>');
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '" rel="lightbox">';
the_post_thumbnail('thumbnail') ;
echo '</a>';
};
the_content('<body>', '</body>');//add here what you want to output per post/product// ?>
</div><!-- END PRODUCT CATEGORY RUGS -->
<?php endwhile; // end of the loop. </div>
endif; wp_reset_postdata(); ?>
<div class="clear"></div>
<!--END RUGS PRODUCT CATEGORY-->
<!--TOTES PRODUCT CATEGORY-->
<?php $args = array(
'posts_per_page' => 100,
'category_name' => 'ProductTotes',
'paged' => get_query_var('paged')
);
$product_posts = new WP_Query( $args );
if( $product_posts->have_posts() ) :
while ( $product_posts->have_posts() ) : $product_posts->the_post(); ?>
<div id="product">
<?php {
the_title('<div id="producttitle">', '</div>');
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '" rel="lightbox">';
the_post_thumbnail('thumbnail') ;
echo '</a>';
};
the_content('<body>', '</body>');//add here what you want to output per post/product// ?>
</div><!-- END PRODUCT CATEGORY RUGS -->
<?php endwhile; // end of the loop. </div>
endif; wp_reset_postdata(); ?>
<div class="clear"></div>
<!--END TOTES PRODUCT CATEGORY-->
<!--THROWS PRODUCT CATEGORY-->
<?php $args = array(
'posts_per_page' => 100,
'category_name' => 'ProductThrows',
'paged' => get_query_var('paged')
);
$product_posts = new WP_Query( $args );
if( $product_posts->have_posts() ) :
while ( $product_posts->have_posts() ) : $product_posts->the_post(); ?>
<div id="product">
<?php {
the_title('<div id="producttitle">', '</div>');
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '" rel="lightbox">';
the_post_thumbnail('thumbnail') ;
echo '</a>';
};
the_content('<body>', '</body>');//add here what you want to output per post/product// ?>
</div><!-- END PRODUCT CATEGORY RUGS -->
<?php endwhile; // end of the loop. </div>
endif; wp_reset_postdata(); ?>
<div class="clear"></div>
<!--END THROWS PRODUCT CATEGORY-->
<!--GIFTCERT PRODUCT CATEGORY-->
<?php $args = array(
'posts_per_page' => 100,
'category_name' => 'ProductGiftCert',
'paged' => get_query_var('paged')
);
$product_posts = new WP_Query( $args );
if( $product_posts->have_posts() ) :
while ( $product_posts->have_posts() ) : $product_posts->the_post(); ?>
<div id="product">
<?php {
the_title('<div id="producttitle">', '</div>');
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '" rel="lightbox">';
the_post_thumbnail('thumbnail') ;
echo '</a>';
};
the_content('<body>', '</body>');//add here what you want to output per post/product// ?>
</div><!-- END PRODUCT CATEGORY RUGS -->
<?php endwhile; // end of the loop. </div>
endif; wp_reset_postdata(); ?>
<div class="clear"></div>
<!--END GIFTCERT PRODUCT CATEGORY-->
</div><!-- #FULLWIDTHHOLDER -->
<?php get_footer(); ?>
