I have this JSFIDDLE setup demonstrating my problem, I'm sure that it's a simple fix.

I am trying to slide out the blue div to the left, while sliding in the red div from the right, at the same time. The sliding animations are working how I want them to, however when the red div is sliding in it appears below the blue div. How can I get it to be positioned to the right of the blue div instead of appearing beneath it during the animation?

code:

$("#slide2").on('click', function(){
    $( "#blueDiv" ).effect( "slide", hideoptions, 1000);
    $( "#redDiv" ).effect( "slide", showoptions, 1000);                
});

I have this JSFIDDLE setup demonstrating my problem, I'm sure that it's a simple fix.

I am trying to slide out the blue div to the left, while sliding in the red div from the right, at the same time. The sliding animations are working how I want them to, however when the red div is sliding in it appears below the blue div. How can I get it to be positioned to the right of the blue div instead of appearing beneath it during the animation?

code:

$("#slide2").on('click', function(){
    $( "#blueDiv" ).effect( "slide", hideoptions, 1000);
    $( "#redDiv" ).effect( "slide", showoptions, 1000);                
});

• javascript
• jquery
• css
• html

2 Answers 2

You can use position: absolute to take them out of the flow and place them beside each other:

div > div
{
    position: absolute;
}

If you want to make it more specific to this div, you can use a specific selector:

#contentWrapper div
{
    position: absolute;
}

JSFiddle

http://jsfiddle/ggfA6/12

position: absolute

Both elements need to be absolutely positioned so that they don't occupy space in the flow.