Alternating CSS classes for dynamic content [closed]

Question

This is for a gallery that's populated automatically, images are pulled in from child pages. Layout is: 2 images in a row and they must be left- and right-aligned respectively.

I can't figure out a way to add a space between them.

• When I add margin or padding, the 2nd image gets pushed off to the next line;
• Without margin, they're side by side (and only the left one is properly aligned).

So I figured alternating CSS classes might work, but not sure how to make the odd images float left, and even images - float right. And the odd/even class for the images will change based on the number of child posts (and therefore, the number of images imported into this Gallery page).

<div id="gallery-container">
    <?php
    $mypages = get_pages( array( 'child_of' => $post->ID, 'sort_column' => 'post_date', 'sort_order' => 'desc' ) );

    foreach( $mypages as $page ) {
    $content = $page->post_content;
    if ( ! $content ) // Check for empty page
    continue;

    $content = apply_filters( 'the_content', $content );
?>


        <div class="gallery-preview">
            <div id="zoom">
                <?php echo $content; ?>
                <h3><a href="http://mettedesigns.com/gallery/<?php echo $page->post_title; ?>"><?php echo $page->post_title; ?></a></h3>
            </div>
        </div>


<?php
}   
?>  
<?php endwhile; endif; ?>
</div>      

Answer 1

Use PHP modulo operator (%) to determine the classes and use CSS to float them all left and set clear:right to the odd class.

Kind of hard to picture how you're pulling the images without the code though. Could you post a clip of the code you used to pull the images?

If not you can resort to JS to add the classes dynamically after the page loads shudder.