Why is the width changing?

Why is the width changing?

I have hard time figure it out this piece of css, when I shrink the page
one button sometimes overlaps the editbox. When I debug with firebug it
shows width =0 for a container, so when I add some width button pops back
to it's place. Anyway I added to the code style="width: 162px;"> but
during the debugging width =0 came back after a while and button
overlapped again.
Why that hard coded width is being changed?
<div class="blocks layout-filter-box" style="width: 162px;">
<div class="area" id="area1" style="height: 41px;">
<label for="field1">Store Name</label>
<span class="text">
<input id="tab-1_NameInput" type="text" data-bind="value: Name,
valueUpdate: 'afterkeydown'"/>
<input type="text" style="visibility: hidden"/>
</span>
</div>
<div class="button-box">
<span class="submit"><input id="tab-1_search" type="button"
value="Search" /></span>
</div>
</div>