将DIV移出屏幕而不会弄乱宽度？

Question

I have an eCommerce cart I am working on, and when a button is clicked, the cart slides out from the left of the screen. I have that part working fine.

<section class="ec-cart">
    <h3>Cart</h3>
</section>

<div class="main-content">
    <div class="overlay-wrap"></div>
    <p>Text text text</p>
    <a class="cart-btn" href="#">Your Cart</a>
</div>

When the .cart-btn link is clicked, the .ec-cart slides out fine, but the .main-content does not slide off of the screen like I need it to. I need it to KEEP THE SAME WIDTH, and just slide off the screen to the right the same amount as the width of the cart.

This JS Fiddle example shows what I have: http://jsfiddle.net/RNmaq/

As seen in the JSFiddle example above, the width of the container shrinks when the cart comes into view.

This website shows what I am going for. If you click the cart button in the top right: http://bit.ly/1gJiy1a

I am achieving the effects thus far by toggling classes. I am open to other suggestions if there is an easier way to do this. Any help would be greatly appreciated.

Answer 1

Set the Width of the main-content to 100%

.main-content {
    transition:left .5s;
    background:#f1f1f1;
    width:100%;
}

here is a fiddle http://jsfiddle.net/RNmaq/4/

Answer 2

Setting the width of .main-content to 100% like this:

.main-content {
    transition:left .5s;
    background:#f1f1f1;
    width: 100%;
}

fixes it. See fiddle

Answer 3

you could use the CSS3 transform:translateX(); style

.main-content {
    transition:all .5s;
    background:#f1f1f1;
}
.main-content-dis {
    position:fixed;
    -moz-transform: translateX(30%);
    -webkit-transform: translateX(30%);
    -o-transform: translateX(30%);
    -ms-transform: translateX(30%);
    transform: translateX(30%);
}

http://jsfiddle.net/RNmaq/6/

similarly if you could apply the translateX to your cart section so that they transition nicely timed together:

.ec-cart {
    width:30%;
    position:fixed;
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    height:100%;
    z-index:5000;
    background:#f1f1f1;
    transition:all .5s;
}
.ec-cart-active {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

fiddle for both using translateX : http://jsfiddle.net/RNmaq/7/