2 oversized divs next to each other in 100% div

Question

We've hit a complete wall with this one, even though we think the solution is quite easy ...!

We have a responsive container div with width 100% and overflow:hidden. This container has a centered margin 0 auto div 'A' with fixed width 950px.

We want to place a max-width container 'B' next to this container with right:-3000px to place it off screen.

We will then use jQuery to animate opacity:0 the first container and animate right:0px the second container, bringing it in nicely from the right of the screen.

However, container B will not line-up next to the container A. It get's placed to the bottom right of the first container.

What do we need to do to get container B to line up next to container A?

Thanks in advance for any help! Here's the code:

HTML:

<div id="container">
    <div id="A">Some content</div>
    <div id="B">Some content</div>
</div>

CSS:

#container {
    float: left;
    overflow: hidden;
    width: 100%;
}
#A {
    margin: 0 auto;
    max-width: 950px;
    position: relative;
}
#B {
    max-width: 715px;
    padding-left: 220px;
    position: relative;
    right: -3000px;
    z-index: 999;
}

Answer 1

Your issue is that you are simply animating the opacity of your first element, when this hits zero, although you cant see it- it is still present within the document layout with its original dimensions. Because B is below it in the DOM, when it slides in, it will be below the space taken by the (albeit) invisible A.

You may want to set display:none on A after the animation completes, or alternatively set its height to zero. This will ensure that as well as fading out, it isnt taking up space as you are anticipating, meaning B can assume the anticipated position.

You may want to use fadeOut(); on A instead of animating its opacity, this will automatically also apply display:none;

Pure CSS 'on hover' solution:

Demo Fiddle

HTML

<div class='wrapper'>
    <div></div>
    <div></div>
</div>

CSS

.wrapper {
    position:relative;
}
.wrapper div:first-of-type {
    height:200px;
    width:100%;
    background:blue;
    position:relative;
    opacity:1;
    transition-delay:0;
    transition-duration:1s;
    transition-property:opacity;
}
.wrapper div:last-of-type {
    height:200px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:red;
    width:100%;
    max-width:0;
    transition-delay:1s;
    transition-duration:1s;
    transition-property:max-width;
}
.wrapper:hover div:first-child {
    opacity:0;
}
.wrapper:hover div:first-child + div {
    max-width:100%;
}

Answer 2

change #B div's position to position:absolute;

Answer 3

Demo here

<div id="container">
    <div id="A">A Some content</div>
    <div id="B">B Some content</div>
</div>

<script type="text/javascript">
$( "#B" ).animate({
    right: 0,
    opacity: 1

}, 1500, "linear", function() {
        alert( "all done" );
});
</script>

<style type="text/css">
#container {
    overflow: hidden;
    width: 100%;
    height:50px;
    position:relative;
    background-color:orange;
}
#container > div {
    position:absolute;
}
#A {
    top:0;left:0;
    margin: 0 auto;
    max-width: 950px;
}
#B {
    max-width: 715px;
    padding-left: 220px;
    right: -3000px;
    z-index: 999;
    background-color:green;
    opacity:0.5;
}
</style>