html - Div resizing itself despite my css rules -

i have bit of html looks this:

<div class="pointwrap">   <div class="imgwrap">    <img src="howtoplay1.jpg" height="101" width="177"/>   </div>   <div class="textwrap">     tap anywhere in drop zone release ball.   </div> </div> 

and css rules code this:

.pointwrap { border-style:solid; border-width:2px; border-color:#2e2e2e; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color:#848484; margin:3px 7px 7px 7px; width:290px; height:170px; }  .imgwrap { width:120; margin:5px 5px 5px 5px; float:left; }  .textwrap {  font-size:9px; margin:0px 6px 6px 6px; float:right; }  div.textwrap { width:40; height:110; float:right; } 

my problem every time load page, textwrap div resizes/realigns wrong.

i have set float right, 40px wide , 110px tall, places under img div instead of right of it, changing dimensions of imgwrap div 217 wide , 11px tall, (just covering text...).

how can keep text right of img, , within height/width parameters set in css rules?

div.textwrap {   width:40px;   height:110px;   float:right; } 

add dimension values. if specify width:40 browser doesn't know whether mean pixels, percentages, chickens or sausages, , ignore rule instead.

your code gives ton of errors in console of decent browser when executed, sure inspect when run unexpected problems. whenever strange happens css: right click, inspect element, , see how browser has parsed code.