Css style float:left problems with my posts

  • Patrice Poliquin

    (@poliquinp)


    13 years, 7 months 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>
            </div>
            <div class="resume"><?php the_excerpt(); ?></div>
        </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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    13 years, 7 months 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'; }

    Thread Starter Patrice Poliquin

    (@poliquinp)

    13 years, 7 months 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.

    Thread Starter Patrice Poliquin

    (@poliquinp)

    13 years, 7 months 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?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Css style float:left problems with my posts’ is closed to new replies.