Question

This jquery example does exactly what I want:

http://jsfiddle.net/yGZHC/5/

In my implementation of it, I have my jquery working fine and my floating box works fine, but all my content is being pushed down by the floating box (div):

http://zerogravpro.com/DEI/

First, notice how the menus and all the content is pushed down quite a bit from the top. Now click the little white-on-black shopping cart icon at the far right of the menu. Notice the box that floats down. All that is fine but WHY is it pushing my content down, when in the jsfiddle example above it does not push the content down? It seems like I’ve implemented all the same styles and jquery. I suspect that there are colliding styles, and would love a little help understanding which style I need to tweak to make this work. Thanks.

Here is my div that’s pushing the content down:

<div id="slidenav">
<div id="innerCart" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Show</h3>
<p>
  Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>

Answer 1

That’s because your #slidenav is position: relative change this to absolute and you should be fine. If you put it relative. The space will be placed and it will move relative from that position.