Title: Basic CSS question
Last modified: August 19, 2016

---

# Basic CSS question

 *  [virgild](https://wordpress.org/support/users/virgild/)
 * (@virgild)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/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](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/basic-css-question/#post-1401051)
 * not possible just with css.
    you could run a counter in the loop and add an etra
   class to every third “block”.
 *  Thread Starter [virgild](https://wordpress.org/support/users/virgild/)
 * (@virgild)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/basic-css-question/#post-1401054)
 * Oh I didn’t know about that. You mean like how I would style the first post differently?
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/basic-css-question/#post-1401066)
 * 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)
 *  [Jonas Grumby](https://wordpress.org/support/users/ss_minnow/)
 * (@ss_minnow)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/basic-css-question/#post-1401067)
 * 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.
 *  Thread Starter [virgild](https://wordpress.org/support/users/virgild/)
 * (@virgild)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/basic-css-question/#post-1401082)
 * 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](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/basic-css-question/#post-1401095)
 * typo, should read
    `<div class="block_two <?php if($counter == 3) { echo ' last';
   $counter=0; } ; $counter++; ?>">`
 *  Thread Starter [virgild](https://wordpress.org/support/users/virgild/)
 * (@virgild)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/basic-css-question/#post-1401098)
 * 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.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 7 replies
 * 3 participants
 * Last reply from: [virgild](https://wordpress.org/support/users/virgild/)
 * Last activity: [16 years, 3 months ago](https://wordpress.org/support/topic/basic-css-question/#post-1401098)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics