Title: Class Div
Last modified: August 22, 2016

---

# Class Div

 *  [Balance Studio](https://wordpress.org/support/users/web-guru/)
 * (@web-guru)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/class-div/)
 * Need help with coding!
 * website: [http://balancestudio.com/page/](http://balancestudio.com/page/)
 * page of interest: [http://balancestudio.com/page/?page_id=21](http://balancestudio.com/page/?page_id=21)
   ‘
   Getting Started’ page from the drop-down menu
 * There are two links “Training Agreement” and “Studio Policies” and i wanted to
   add a Third area where I could upload a different PDF file…
 * Here is the original coding:
 *  <div class=”full-width clearfix”>
 *  <div id=”buttons” class=”clearfix”>
    <?php if (get_field(‘pdf_1’)) { ?> <div
   class=”half first”> “><span class=”icon-file”></span> <?php the_field(‘pdf_1_title’);?
   > </div> <?php } if (get_field(‘pdf_2’)) { ?> <div class=”half last”> “><span
   class=”icon-file”></span> <?php the_field(‘pdf_2_title’); ?> </div> <?php } ?
   >
 *  </div>

Viewing 1 replies (of 1 total)

 *  [TrishaM](https://wordpress.org/support/users/trisham/)
 * (@trisham)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/class-div/#post-5677095)
 * So the buttons right now each take up half the width of the area they are in,
   and what you want to do is add another button, on the same line? So that they
   then each take up only a third of the area?
 * If that’s the case you’ll first need to look at your stylesheet and find the 
   styles for “half” “first” and “last”
 * Most likely “half” specifies a width property with maybe some margins and padding,
   and “first” and “last” likely have floats in them.
 * FIRST BACKUP BOTH THE STYLESHEET AND THE PAGE WITH THE CODE!
 * Then I would change “half” to “third” and modify the width so that each button
   with the class of half takes up one third of the space, minus any margins you
   use – width plus margins cannot equal more that 100% of the space or it won’t
   line up right.
 * You’ll change “half” to “third” in both the stylesheet and the page so they match.
 * Now for ‘first’ and ‘last’…and how they are floated.
 * If they are both float:left; no problem, just add ‘second’ to the stylesheet 
   with the same float:left and then put that style in your new button so it reads
   style=”second third”
 * Where it will get tricky is if “first” is a float:left; and “last” is a float:
   right;
 * You can change them so they are all float:left; which will work, alhtough you
   may have to adjust the margins a bit on the ‘third’ style to keep them where 
   you want them.

Viewing 1 replies (of 1 total)

The topic ‘Class Div’ is closed to new replies.

## Tags

 * [Coding](https://wordpress.org/support/topic-tag/coding/)
 * [div-class](https://wordpress.org/support/topic-tag/div-class/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [TrishaM](https://wordpress.org/support/users/trisham/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/class-div/#post-5677095)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics