css - Dynamic DIV for 2 different views -

i'm trying make dynamic div using css , angular. here have far:

fiddle

var myapp = angular.module('myapp',[]);  function myctrl($scope) {      $scope.name = 'views';   } 

i have big div (marked red). in div have 2 divs: left 1 (black) , right 1 (yellow). , 2 links: 7 days , 30 days. when click on 7 days should have first view: here have right div fix width , left 1 has adjust width ("red div" minus "yellow div").

when click on 30 days link, yellow div should disappear , black div should big red one.

so far managed make right div appear , disappear.. problem left 1 not expanding none of views

any suggestions?

here's need: http://jsfiddle.net/hb7lu/3140/. represents how "take full width when condition verified".

ng-class="{w100: show_tab==2}" means "the w100 class applied element if show_tab==2 true".

some remarks you:

• in css, #child_element_id enough id definition. should not define selector follows: some_selector #child_element_id {...}
• the floating element should placed first, that's why #unu_doi comes before #unu_unu

good luck.