Question

I have a div with some text and another div with some hidden buttons behind the text div and move to the left when needed (anitmation).

The problem is that the text inside div is moved to the right to let the buttons div not overlap with the text.

Check here:
http://clip2net.com/s/2JYBV

How to make text of main text div not interact depending of the the width/size/position of the button div?

Answer 1

.a {
    position:relative;
    width:400px;
    height:300px;
    margin:50px 200px;
    background:#000;
    padding:10px;
    color:#fff;
}
.b {
    position:absolute;
    top:10px;
    left:0px;
    width:180px;
    height:290px;
    background:green;
    display:none;
}
.a:hover .b {
    display:block;
    /* left:-150px; */
}

You can use relative and absolute positioning of divs to fulfill your required task.

http://jsfiddle.net/G9Q25/