2 columns layout with different views: 100%:0% , 70%:30%, 0%:100%

Problem

This is a HTML/CSS structure/position issue, it's probably a quicky and I just missed something. Been on it for days now...can't figure it out.

I have a feed of info that I display in almost full width, when I click a button, I want a second panel to slide in from the right to a ratio of ~68/28 and if I click another button, the right panel takes the full width.

I tried a bunch of things, position relative, floats...but I can't seem to figure it out. And ideally would be using the CSS "position" attribute to make the animation smooth using CSS3.

It seems I'm really bad at positioning stuff.

Here is the HTML, plain and simple:

<div class="container">
    <div class="col-left">Some content here from left col</div>
    <div class="col-right">Some content ehre from right col</div>
</div>

and the CSS that doesn't work:

.container{
    position: absolute;
    left: 50px;
    padding: 0 40px;
    right: 0;
}

.col-left. col-left{
    position: relative;
    display: block;  
    top:0px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.col-left{
    left:0px;
}
.col-right{
     right: -100%;  
}

body.split .col-left{   
}

body.split .col-right{
}

Here is a Fiddle:

http://jsfiddle.net/5zG3q/21/ (as you can see, I'm already on v21 of Fiddle and still can't figure it out)

Thanks in advance for your help.

EDITS After some tweaking, I got something closer to what I want, but it feels dirty... http://jsfiddle.net/5zG3q/23/

Problem courtesy of: denislexic

Solution

After from inspiration from @drew_w and from other post, I think I found the solution. I added a wrapping DIV around the col that was twice the width. Then the divs ratios, I had to divide by 2 obviously. Then I could just play with the widths and the positions to have the animation.

.container {
    position: absolute;
    left: 60px;
    padding: 0 40px;
    right: 0;
    overflow:hidden;
    background:#e2e2e2;
}
.inner-container{
    display: block;
    width: 200%;
    overflow: hidden;
}
.col-left,  .col-right {
    display: inline-block;
    vertical-align: top;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.col-left {
    width: 50%;
    background: green;
}
.col-right {
    margin-left: 10%;
    width: 29%;
    background: red;
}
body.split .col-left {
    width: 33%;
}
body.split .col-right {
    margin-left: 1%;
    width: 15%;
}
body.full .col-left {    
    width: 33%;
    margin-left: -33%;
}
body.full .col-right {
    margin-left: 0%;
    width: 50%;
}

Had to add a bit of JS that adds a class to the body:

$("body").on("click", "[data-toggle-view]", function () {    
    var $this = $(this);
    var $body = $("body");
    var view = $this.data("toggleView");
    $body.removeClass("split full");
    $body.addClass(view);
    return false;
});

Here is the Fiddle: http://jsfiddle.net/5zG3q/23/

Still doesn't feel very clean, but it works.

Solution courtesy of: denislexic

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.