ansaurus

Question

Answer 1

+2 A:

Somewhat of an odd workaround, but you can set the following rules for the second div:

{ position:relative; top:10px; }

Online demo: http://jsbin.com/enala/edit

I would also encourage you to consider Doug's Answer. If setting a padding on your parent container produces undesired results, you could fall back on this solution as an alternative.

Jonathan Sampson 2010-02-17 19:50:47

Yup, that works as well. I love how CSS has a number of ways to solve problems!

Doug Neiner 2010-02-17 20:16:25

Answer 2

+2 A:

Believe it or not, you just need to add a 1px padding to the top of the parent container. The problem is, at the end of slideToggle the first div is set to display:none which causes the second div to be smack dab against the parent. Now, its just a CSS bug. If there is no padding set on the parent item, the child items margin will go outside of the parent, and push both items down. By applying a 1px margin to the parent element, you force the margin to stay inside the element:

<body style="padding-top: 1px">
  <div class="myToggledDiv">
      <div>content</div>
  </div>

  <div style="margin-top: 10px;">
      content
  </div>
</body>

Obviously, you want to remove all of those inline styles and use a separate stylesheet and id's/classes as needed.

If you need to offset the extra padding (depending on your layout) you might just be able to use this:

{ margin-top: -1px; padding-top: 1px }

Doug Neiner 2010-02-17 20:13:29

+1 Good information as always, Doug!

Jonathan Sampson 2010-02-17 20:15:39

ansaurus

tags:

views:

answers:

jQuery, toggling div, CSS spacing issue

related questions