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 do I wrap and set CSS properties to achieve the depicted results?

    Twitter Bootstrap 3 - how to properly replace glypicons with custom made icons?

    How to capitalize first letter with JSTL/CSS?

    How to set negative z-index with jQuery?

    CSS rule doesn't show up in developer tools

    How do I center a dynamic div?

    How to Make
    • as structured

    Show background image if container content is small (responsive)

    How to animate a div to move from end to end infinitely

    How to make the buttons responsive?

    How can i make an icon blink using CSS/javascript/jquery [duplicate]

    How to Overlay a Transparent Navbar Over a Fullscreen Jumbotron

    How to override PrimeFace CSS to customize my button?

    How to set the jquery draggable with margin left?

    How to make a foreground image using CSS?

    How to fill page width of tables with css

    How to link an external stylesheet in CSS

    How to CSS select all cells with colspan set?

    How to style a dynamic html created by PHP

    using css, how to position image so when resizing window, image will not move

    CSS page headers - how to use print margins?

    CSS how to change color of a specific primary-panel in a if-block

    how can i center the text inside my css div circle

    How to select the second paragraph after another with css?

    How do I use css to make a row of boxes that do not wrap when browser shrinks?

    how to align image and text when floating to image

    How to change the background color of an input field when text is entered?

    How do I center text vertically with css [duplicate]

    How to style HTML5 tag

    how to set css and html in textarea [closed]