Question

I’m trying to make a ‘slide-out’ div that slides out when out hover over it. What I want to happen is that I want the left div to push the right div off into oblivion, but not below the div, but to the right.
Does anyone know why this happens?

Here is my script:

.container {
    width: 796px;
    background-color: yellow;
    overflow:hidden;
}
.left {
    display:none;
    float: left;
    width: 256px;
    background: green;
}
.right {
    float: right;
    width: 796px;
    height: 100%;
    background-color: red;
}

Here is a live demo
click ‘colorbox’, then ‘show left div’.

Thank you everyone! :))))

Answer 1

Assuming your .left and .right are within .container the reason one gets pushed down is because there is not enough space.

You have set a width:796px for the .container and so the children i.e. .left and .right would need to add up to 796px. At the moment they add up to 1052px and so one of them is pushed down as they cannot fit side by side.

EDIT : Using inner container method mentioned in my comments below and in @Matteo’s answer you need to adjust the following css.

.inner_container{
    width: 1396px; /* changed from 1052px */
}
.right {
    background-color: red;
    float: left; /* changed from right */
    height: 100%;
    width: 796px;
}

The reason it needs to be 1396px is because it needs to be large enough that when .left is expanded to 600px that .right at 769px can still fit beside it. Then changing to float:left is necessary so that there is no gap between the .left and .right and it remains visible when it is pushed sideways.