2 oversized divs next to each other in 100% div - html

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

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

Answer 2

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>

Answer 3

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%;
}