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

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

this html/css structure/position issue, it's quicky , missed something. been on days now...can't figure out.

i have feed of info display in total width, when click button, want sec panel slide in right ratio of ~68/28 , if click button, right panel takes total width.

i tried bunch of things, position relative, floats...but can't seem figure out. , ideally using css "position" attribute create animation smooth using css3.

it seems i'm bad @ positioning stuff.

here html, plain , simple:

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

and css 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: 500ms ease; -moz-transition: 500ms ease; -ms-transition: 500ms ease; -o-transition: 500ms ease; transition: 500ms ease; } .col-left{ left:0px; } .col-right{ right: -100%; } body.split .col-left{ } body.split .col-right{ }

here fiddle:

http://jsfiddle.net/5zg3q/21/ (as can see, i'm on v21 of fiddle , still can't figure out)

thanks in advance help.

edits after tweaking, got closer want, feels dirty... http://jsfiddle.net/5zg3q/23/

after inspiration @drew_w , other post, think found solution. added wrapping div around col twice width. divs ratios, had split 2 obviously. play widths , positions have 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: 500ms ease; -moz-transition: 500ms ease; -ms-transition: 500ms ease; -o-transition: 500ms ease; transition: 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 add together bit of js adds class 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); homecoming false; });

here fiddle: http://jsfiddle.net/5zg3q/23/

still doesn't sense clean, works.

jquery html css html5 css3