How to allow my CSS slide out element to push its neighboring content?

Tags: css,slider,push

Problem :

I've made a slide-out element using CSS (in the footer, bottom left next to the picture) and would like for it to push the picture and the description to the right, when its hovered over and slid-out. I've made them all position:relative, am I missing something?

Quite new to trying to code, so hopefully the question makes sense.


Here's the link to the site:

Solution :

It doesn't work because the #slideout element is not changing its width. It is fixed to 20px.

Additionally, the #slideout_inner div is being slid out by changing its left (correct?) position. This wont work because the left/right/top/bottom positioning of a relative element doesn't actually affect the space it uses (and therefore doesn't make the parent wider), it just affects where it is displayed. Try animating its left margin, padding or width instead.

    CSS Howto..

    How can I add a default to my CSS slide show banner?

    How to put gradient on top of background image but below text

    How to position footer correctly with css?

    how to make sure image shows over my twitter bootstrap 3 input field

    How can I get my divs to process separately?

    How to expand and
  • to fit the width of the
      using css? (or even jquery)
  • how to get a CSSStyleSheet object from a