Title: Strange layering/float issue
Last modified: August 20, 2016

---

# Strange layering/float issue

 *  Resolved [joshuaiz](https://wordpress.org/support/users/joshuaiz/)
 * (@joshuaiz)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/)
 * I’m experiencing a strange layering issue when using C-O-M. With the theme I’m
   using there are three boxes on the homepage – I’ve made the backgrounds light
   blue so you can see it:
 * [http://graettingercole.com/](http://graettingercole.com/)
 * The ‘Read More’ links trigger the expanded content. As you can see, if you click
   on box#1 (left), the expanded content box falls behind the next two boxes to 
   the right.
 * Clicking on ‘Read More’ for box#2 covers up the box to the left but is still 
   behind box#3 to the right.
 * Clicking on box#3 covers up the two boxes to the left and this is how it should
   ideally work for all the expanded content boxes.
 * I’ve tried various things: z-index; display: block, etc but nothing seems to 
   work.
 * Any ideas on how to resolve this?
 * [http://wordpress.org/extend/plugins/jquery-collapse-o-matic/](http://wordpress.org/extend/plugins/jquery-collapse-o-matic/)

Viewing 15 replies - 1 through 15 (of 25 total)

1 [2](https://wordpress.org/support/topic/strange-layeringfloat-issue/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/strange-layeringfloat-issue/page/2/?output_format=md)

 *  [uamv](https://wordpress.org/support/users/uamv/)
 * (@uamv)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132637)
 * On what element, or class, did you set the z-index?
 *  Thread Starter [joshuaiz](https://wordpress.org/support/users/joshuaiz/)
 * (@joshuaiz)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132682)
 * The expanded content boxes have the following ids:
 * #target-impact1
    #target-impact2 #target-impact3
 * The parent content boxes have class .one_third which is given by the theme.
 * I’ve tried assigning z-index values in Firebug and it is not having an effect.
 *  Plugin Author [Baden](https://wordpress.org/support/users/baden03/)
 * (@baden03)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132688)
 *     ```
       #target-impact1 {
          margin: 0 auto;
          padding: 2em 3em;
          width: 300% !important; <--please explain this
          background: #EFE8DD;
       }
       ```
   
 *  Thread Starter [joshuaiz](https://wordpress.org/support/users/joshuaiz/)
 * (@joshuaiz)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132690)
 * The three .one_third boxes are 30.6% width – set by the theme.
 * I want the expanded content to be full width of the page bounding box (eg the
   parent content box) so this ‘breaks out’ of the one-third boxes.
 *  [uamv](https://wordpress.org/support/users/uamv/)
 * (@uamv)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132697)
 * Was the z-index declared for the class of .one_third or for id’ed target elements?
 *  Thread Starter [joshuaiz](https://wordpress.org/support/users/joshuaiz/)
 * (@joshuaiz)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132699)
 * UaMV: I’ve tried on either and both.
 * That said, the id’ed target elements (the expanded content) is within the .one-
   third div so logically applying the z-index should only be on the target elements
   themselves.
 *  [uamv](https://wordpress.org/support/users/uamv/)
 * (@uamv)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132701)
 * i don’t know if this could be the issue, but just found this article … i learned
   a few things in reading it. Specifically, this quote …
 * > When you add css positioning to an element and give it a z-index (other than
   > auto) it creates new stacking context with new stacking levels inside the new
   > context.
   > The z-index value creates a new integer stacking level for that element with
   > a position along the z-axis set relative to the other boxes within the same
   > stacking context.
 * [http://www.vanseodesign.com/css/css-stack-z-index/](http://www.vanseodesign.com/css/css-stack-z-index/)
 *  Thread Starter [joshuaiz](https://wordpress.org/support/users/joshuaiz/)
 * (@joshuaiz)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132703)
 * Really good and clear article, but it doesn’t seem to help.
 * I haven’t found any z-index combination that has any effect on the target boxes
   whatsoever.
 *  Plugin Author [Baden](https://wordpress.org/support/users/baden03/)
 * (@baden03)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132724)
 * just to be clear: You want to have three columns of text with expand triggers
   at the bottom of each. When a trigger is expanded, the content will expand, full
   width and below all three columns.
 * What happens when more than one content area is expanded? Does the first one 
   collapse, or do they just ‘stack’ up?
 * Regardless, I think you will be better served if you use the [roll-your-own](http://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/#roll-your-own)
   method. This will allow you to define your columns, place your triggers, and 
   close the columns… then below that, insert your hidden target content areas.
 * Again, the key is you want to place the target containers outside of your columns.
 *  Thread Starter [joshuaiz](https://wordpress.org/support/users/joshuaiz/)
 * (@joshuaiz)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132733)
 * Thanks Baden.
 * When more than one is expanded they do stack up so yes, the best thing to do 
   is to pull the triggers/hidden target outside of the columns.
 * On to that next.
 * Let me just say that I love this plugin – I think I’ve used it on at least 10
   sites including some personal ones so thanks!
 *  Plugin Author [Baden](https://wordpress.org/support/users/baden03/)
 * (@baden03)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132735)
 * Glad you like it. Let us know if you need help with the roll-your-own setup.
 *  Thread Starter [joshuaiz](https://wordpress.org/support/users/joshuaiz/)
 * (@joshuaiz)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132762)
 * Hey Baden,
 * I tried the roll-your-own and it’s a little better. But I was wondering if there
   is a way to have only one target area expanded at a time (so they don’t stack
   up).
 * In other words, when you expand one, the others on the page close. I know this
   is possible with jQuery…
 *  [uamv](https://wordpress.org/support/users/uamv/)
 * (@uamv)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132763)
 * Check out the rel=”” attribute on the documentation page.
 *  Thread Starter [joshuaiz](https://wordpress.org/support/users/joshuaiz/)
 * (@joshuaiz)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132764)
 * UaMV: Sweetness! Highlander is it…
 * One last question…
 * I’m trying to highlight the ‘parent’ column when the target for that column is
   expanded but I can’t seem to make it work:
 * If you go back to the site: [http://graettingercole.com/](http://graettingercole.com/)
 * I’m using the middle box. It has a light blue highlight but I want that only 
   to come on when the target below it is expanded.
 * I’m using the following:
 *     ```
       <script>
       if (jQuery("#target-impact2").is(":visible")) {
           jQuery("#imp2wrap").addClass("imp2_highlight");
       } else {
       	if (jQuery("#target-impact2").is(":hidden")) {
       		jQuery("#imp2wrap").removeClass("imp2_highlight");
       	}
   
       }
       </script>
       ```
   
 * It is adding the class even when the target contact is set to display:none;.
 * Any ideas on how to accomplish this?
 *  Plugin Author [Baden](https://wordpress.org/support/users/baden03/)
 * (@baden03)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/#post-3132767)
 * Dude, you are really diving into the deep end!
    Ok, so a couple of things:
 * First, I recommend you lock the position of the open/close trigger above the 
   target content, and then place an additional ‘collapse trigger’ at the bottom
   of each target content div. Check out the [internal collapse trigger](http://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/#internal-collapse-trigger)
   in the documentation
 * Second, to answer your question: This is what we know so far:
    the id of the 
   second box is **impact2**, this means that the target content id must be: **target-
   impact2** So far so good. Now, you want to make it so when trigger is toggled,
   then we toggle the highlight class to the partent wrapper (imp2wrap). So far 
   so good? Good.
 * Now what you’ll want to do is:
    1. rename the ID of your parent div from _imp2wrap_ to _parent-impact2_: basically
       parent-<trigger_id>
    2. add the following to your functions.php file:
    3.     ```
           function my_custom_js() {
           ?>
           <script type="text/javascript">
           jQuery(document).ready(function() {
               jQuery('.collapseomatic').click(function() {
                   var thisID = jQuery(this).attr('id');
           	if(thisID.indexOf('bot-') != '-1'){
           		thisID = thisID.substr(4);
           	}
                   var parentID = 'parent-' + thisID;
                   jQuery('#' +parentID ).toggleClass('my_highlight_class');
               });
           });
           </script>
           <?php
           }
           add_action('wp_head', 'my_custom_js');
           ```
       
 * We even created a little demo for you so you can better wrap your head around
   it:
    [http://spacedonkey.de/464/collapse-o-matic-changing-parent-element/](http://spacedonkey.de/464/collapse-o-matic-changing-parent-element/)
   Can you dig it?

Viewing 15 replies - 1 through 15 (of 25 total)

1 [2](https://wordpress.org/support/topic/strange-layeringfloat-issue/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/strange-layeringfloat-issue/page/2/?output_format=md)

The topic ‘Strange layering/float issue’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/jquery-collapse-o-matic_fffeff.svg)
 * [Collapse-O-Matic](https://wordpress.org/plugins/jquery-collapse-o-matic/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/jquery-collapse-o-matic/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/jquery-collapse-o-matic/)
 * [Active Topics](https://wordpress.org/support/plugin/jquery-collapse-o-matic/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/jquery-collapse-o-matic/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/jquery-collapse-o-matic/reviews/)

## Tags

 * [layering](https://wordpress.org/support/topic-tag/layering/)
 * [Z-index](https://wordpress.org/support/topic-tag/z-index/)

 * 25 replies
 * 3 participants
 * Last reply from: [joshuaiz](https://wordpress.org/support/users/joshuaiz/)
 * Last activity: [13 years, 7 months ago](https://wordpress.org/support/topic/strange-layeringfloat-issue/page/2/#post-3132777)
 * Status: resolved