Ready to get started?Download WordPress


Css style float:left problems with my posts (4 posts)

  1. poliquinp
    Posted 3 years ago #

    Hi guys,

    I would like to know if there is anyways to "hack" the script so my two coloums of post would get a different css style (float). One with a margin-right:"x"px; and the other without margin-right. I need to do this or my posts can't enter on the same line in my division.

    Here some code
    The PHP/HTML Part

    <?php if (have_posts()) : ?>
             <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("post_per_page=8&paged=$paged'"); ?>
            <?php while (have_posts()) : the_post(); ?>
            <div class="post" id="post-<?php the_ID(); ?>">
                <h3 class="titre_conseil"><a href="<?php the_permalink() ?>" rel="bookmark" title="Lien vers  <?php the_title_attribute(); ?>"><?php the_title(); ?></a><span class="comments_infos"><img src="<?php bloginfo( 'template_url' ); ?>/images/modele/accueil/blogue/ico_commentaires.gif" alt="Commentaires | Okidoo Interactif" class="ico_commentaires"/><span class="lien_commentaires"><?php comments_popup_link('0','1','%','comments-link'); ?></span></span></h3>
                <p class="infos_conseil"><?php the_time('j F Y') ?> par <?php the_author_meta('first_name') ?> | <span class="liens_categories"><?php the_category(', ') ?></span> </p>
                <div class="boite_thumbnail">
                    <div class="thumbnail">
                        <?php the_post_thumbnail(); ?>
                <div class="resume"><?php the_excerpt(); ?></div>
            <?php endwhile; ?>
            <?php endif; ?>

    And this is my CSS

    div.post {float:left; width:310px; min-height:315px; margin-right:16px;}

    There we go, if you got any ideas how I could give the "left" ones a class and the "right" ones an other class, please answer me.

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    try to change this line:

    <div class="post" id="post-<?php the_ID(); ?>">

    to this:

    <?php $left_right = ($left_right == 'left') ? 'right' : 'left'; ?>
    <div class="post <?php echo $left_right; ?>" id="post-<?php the_ID(); ?>">

    your css:

    div.post {float:left; width:310px; min-height:315px; margin-right:16px;}
    div.post.left { margin-right:16px; }
    div.post.right { margin-right:0px; }

    this here:
    $left_right = ($left_right == 'left') ? 'right' : 'left';
    is a short for :

    if( $left_right == 'left' ) { $left_right = 'right'; }
    else { $left_right = 'left'; }
  3. poliquinp
    Posted 3 years ago #

    Let me try!

    Edit : Your my life saver dude! Thumbs-up to you!

    this works exactly how I wanted. I need to add this to my WordPress favs.

  4. poliquinp
    Posted 3 years ago #

    @alchymyth : As my two div are seperates by a margin, is there anyway I could regroup 1 row to place a border under each rows?

    Could I do like a global div for 2 div.posts?

    [global div]
    [div left][div right]
    [/global div]-BORDER-

    [global div]
    [div left][div right]
    [/global div]-BORDER-

    You know what I mean?

Topic Closed

This topic has been closed to new replies.

About this Topic