Div resizing itself despite my css rules

Question

I have a bit of HTML that looks like this:

<div class="pointwrap">
  <div class="imgwrap">
   <img src="howtoplay1.jpg" height="101" width="177"/>
  </div>
  <div class="textwrap">
    Tap Anywhere in the Drop zone to release a ball.
  </div>
</div>

and my CSS rules for this code look like 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 is that every time I load the page, the textwrap div resizes/realigns itself to something completely wrong.

I have it set to float right, 40px wide and 110px tall, but currently it places itself under the img div instead of to the right of it, as well as changing the dimensions of the imgwrap div to 217 wide and 11px tall, (just covering the text...).

How can I keep this text to the right of the img, and within the height/width parameters I set in my css rules?

Answer 1

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

Add a dimension to the values. If you just specify width:40 the browser doesn't know whether you mean pixels, percentages, chickens or sausages, and will ignore the rule instead.

Your code gives a ton of errors in the console of a decent browser when executed, be sure to inspect that when you run into unexpected problems. Whenever something strange happens with CSS: right click, Inspect Element , and see how the browser has parsed your code.