WordPress.org

Support

Support » How-To and Troubleshooting » Basic CSS question

Basic CSS question

  • I’m sort of confused. I know how to style the first or last child of a list but how about a group. For example I have a 900px container and in it I’m displaying my excerpts from blog posts, each in a div class “block” about 290px wide and a margin-right of 20px to create some space between them. 3 blocks should be in a row but the last ones go beneath because of the margin right

    How would I remove the margin-right from those? Not sure if that’s possible with php generated divs

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

    @alchymyth

    Forum Moderator

    not possible just with css.
    you could run a counter in the loop and add an etra class to every third “block”.

    Oh I didn’t know about that. You mean like how I would style the first post differently?

    Michael

    @alchymyth

    Forum Moderator

    exactly, only that you would check if the counter equals 3, and then reset the counter and count on.

    structure:

    <?php
    if(have_posts()) :
    $counter=1;
    while(have_posts()) : the_post(); ?>
    <div class="block <?php if(%counter == 3) { echo ' last'; $counter=0;  } ; $counter++; ?>">
    <!-- html and php to display the excerpts -->
    </div>
    <?php endwhile; endif; ?>

    (untested)

    You can use

    overflow: hidden;

    in the CSS of your 900px container and make either your blocks or your margins smaller so that the total width does not exceed 900 plus the width of the margin-right.

    ok I tested it an I get

    Parse error: syntax error, unexpected ‘%’

    on this line
    <div class="block_two <?php if(%counter == 3) { echo ' last'; $counter=0; } ; $counter++; ?>">

    Michael

    @alchymyth

    Forum Moderator

    typo, should read
    <div class="block_two <?php if($counter == 3) { echo ' last'; $counter=0; } ; $counter++; ?>">

    Wow it works!!! Php is so flexible 🙂 Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Basic CSS question’ is closed to new replies.
Skip to toolbar