Here is a snippet of HTML code:
<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>
These are the CSS rules I have applied to the code above:
.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;
}
However, there seems to be an issue with the alignment and sizing of the textwrap div every time the page loads.
Despite setting it to float right, 40px wide, and 110px tall, the textwrap div displays incorrectly by aligning itself under the img div and changing the dimensions of the imgwrap div. How can I ensure that the text stays to the right of the image and adheres to the specified height and width parameters in my CSS?