CSS issue - How to Prevent Floating Objects from Wrapping in a Container, without changing size of container?

Here is my JSfiddle document:

http://jsfiddle.net/TSM_mac/xXcZx/1/

Basically, I am trying to make the second div slide in as the first div slides out.

I am having a problem with my CSS, the second div (because it is float: left) goes to the next line

The way开发者_如何学JAVA to fix it would be to make sure that they always stay on the same line, but I cant figure this out :(.

Any suggestions?

Regards,

Taylor

Here is what I came up with: http://jsfiddle.net/wdm954/xXcZx/7/

I added a <div id="wrapper"> around your other DIVs with overflow:hidden and removed the styling from #container and set its width dynamically with jQuery.

$('#container').width(function() {
    return $('.page').width() * $('.page').length;
});

Since you have the .page class on each of your DIVs you can use use that instead of each ID.

$('#move').live('click', function () {
    $('.page').addClass('slideLeftOut');
});

I'm not sure if it was your intention but after the webkit keyframe animation was complete it was going back to the start (Object 1). If your intention was to have "Object 2" remain in view after the animation is complete then try this...

.slideLeftOut {
    -webkit-transition: -webkit-transform 4s linear;
    -webkit-transform: translateX(-100%);
}

You can do:

white-space: nowrap;

on the container, and then:

display: inline-block;

on the children. Then you can play around with the margins, not sure exactly what you're trying to accomplish. But I'm not sure this is the most elegant way of doing it. In any case, here's the version of your fiddle that doesn't wrap, let me know if I misunderstood:

http://jsfiddle.net/xXcZx/5/