Image is displayed unusually big when inside a page - html

Question

I have this image:
http://www.problemio.com/img/phoneimage.png
But when I placed in inside a page like this:
<div style="float:left">
<img src="https://i.stack.imgur.com/83Z5U.png" style="border: none;" />
</div>
<div style="float:left">
<p>
Some text
</p>
<p>
Some text
</p>
</div>
It got displayed as very big. Here is how it looks on a test page:
http://problemio.com/business/business_economics.php
Would anyone know why that happened? It is really unexpected. Here is the css I am working with
/* layout styles across the problemio project */
html
{
background-color: #ECE5B6;
#4a4647;
}
body, html
{
padding: 5px;
}
body
{
font-family: "Century Gothic",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
font-size: 1.3em;
#background-color: #5C5957;
#background-color: #4a4647;
#background:url(/img/ui/background_image.png) top left no-repeat;
#background-size: 100%;
}
/* makes the background of the top bar gray */
.container
{
position: relative;
background-color: white;
overflow:hidden;
width:1000px;
margin: 0 auto;
-moz-border-radius: 15px;
border-radius: 15px;
}
.container_home
{
position: relative;
background-color: white;
overflow:hidden;
width:1000px;
margin: 0 auto;
}
div#bd
{
/* background-color: #f5f6f6; */ /* some form of gray */
background-color: white;
border-style:solid;
border-width:1px;
}
/* styles for banner: */
.banner
{
position: relative;
height: 40px;
background-size:100%;
#background-color: #4a4647;
}
.site_title
{
float:left;
margin-top: -3px;
margin-left: 10px;
font-weight: bold;
color: #ffce2e;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
font-size:2.5em;
text-align: left
text-color: black;
width: 300px;
}
.site_login
{
width: 700px;
float:right;
position: absolute;
right: 10px;
bottom: 10px;
font-size: 90.0%;
color: gray;
text-align: right;
text-align: bottom;
}
/*
.bgdiv
{
position:absolute;
right:0px;
left:240px;
top:0px;
bottom:0px;
background-image: url('http://www.problemio.com/img/ui/banner_background.png');
#background-repeat: no-repeat;
}
*/
/* styles for basic template */
.content .basic
{
background: #fff;
padding: 15px;
border: 1px solid #888;
border-color: gray;
text-align: left;
}
.content .basic h1{
font-size: 2em;
font-weight:bold;
text-align: center;
}
.content .basic h2{
font-size: 1.5em;
font-weight:bold;
}
.content .basic h3{
font-size: 1.0em;
font-weight: bold;
}
#layout
{
/*margin:auto; */
#margin-top: 5px;
padding-right: 20px;
padding-left: 20px;
text-align:left;
/* background-color: #EDEDED; */
}
label span
{
float: left;
width: 15em;
}
p.half_text
{
font-size: 80.0%;
font-type: arial;
}
span.half_text
{
font-size: 80.0%;
font-type: arial;
}
p.half_height
{
margin: 5px 0;
}
.index_problem_title:visited
{
font-weight:bold;
text-decoration: none;
}
.index_problem_title
{
font-weight:bold;
text-decoration: none;
}
.index_problem_title:hover
{
text-decoration:underline;
color: gray;
}
footer a
{
color: white;
}
div.footer
{
text-align: right;
#color:#999999;
color: white;
background-color: black;
font-family:arial,times,serif;
font-size:18px;
#padding-top:20px;
line-height:150%;
position:relative;
float:right;
bottom:10px;
#height: 100px;
style: clear:both;
width: 1000px;
#background:url(/img/ui/footerbar.png) top left no-repeat;
}
#tabs-1
{
padding-left: 10px; !important;
}
.ui-tabs-panel
{
padding: 5px !important;
}
.ui-widget-header
{
background-image: none;
background-color: #EBEBEB;
padding-left: 50px;
}
.ui-state-default
{
background-image: none;
background-color: Gray;
}

Answer 1

To make adjacent,
<div style="float: left; width: 68%; display: inline;">
<img width="60%" height="60%" style="border: none;" src="http://www.problemio.com/img/phoneimage.png">
</div>
<div style="display: inline; float: left; width: 28%;">
<p>
Understanding and correctly forecasting the unit economics of your business is extremely important. It is a large part of a successful business plan, and the business itself. The term might sound complicated, but it is surprisingly simple. At least we will try to make it so with an example.
</p>
<p>
In an effort to make this material easy and fun to understand, we will actually go over the unit economics of a real business. Our example business: A single-location exercise gym. We will call it Bob's Fitness.
</p>
</div>
Actually , I just added some inline css to your code,you can made them in class or id also

Answer 2

#layout div img
{
max-width: 100%;
width: 100%;
}
Add this css in your page or place as you want.

Answer 3

I see you are modifying it :-) i'm testing with firebug!
In any case I tested it there
http://jsfiddle.net/eb56N/2/
I've just added
<img style="border: none; width: 100%;" src="http://www.problemio.com/img/phoneimage.png">
Maybe you already changed something.