javascript - css transition width and height to 0 on absolute div doesn't work -

my purpose transition div width , height 0 gradually making not visible user. have following absolutely positioned div:

<div id="main" style="width: 200px; height: 100px; left: 648px; top: 253px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearel" class="x-clear" role="presentation"></div></div></div> 

when user presses on close div, attach "main" div following css class:

.collapserecommendation {    -webkit-transition: 1.0s ease-in-out;   -moz-transition: 1.0s ease-in-out;   -o-transition: 1.0s ease-in-out;   transition: 1.0s ease-in-out; } 

and in javascript (extjs) code set div's width , height 0:

 maindiv.setstyle('width', '0px');  maindiv.setstyle('height', '0px'); 

and set "main" div different left , top position work expected.

however "main" div height , width set 0, internal's div size doesn't change , stays on same place , visible user, after transition have following:

<div id="main" style="width: 0px; height: 0px; left: 348px; top: 153px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearel" class="x-clear" role="presentation"></div></div></div> 

as see internal div still has size 200x150. can reason didn't become o size well?

we shouldn't expect child div's size change, should we?

when comes block elements divs, width depends on parents' width because browsers treat block elements if have width: 100% set on them. however, when explicitly set styling, treatment overridden , dimensions behave entirely independently of 1 another.

this jsfiddle shows behavior of nested divs when , don't specify widths. if click divs, you'll see them resize. top divs resize independently; bottom divs remain same width. again, because width wasn't explicitly declared.

the solution programmatically change dimensions of each child div. this, loop through children , set of dimensions. code might like:

var children = maindiv.childnodes; for( = 0; < children.length; i++ ) {   if ( children[i].nodetype == 1 ) {     // children[i]   } }