Problem with image flowing outside of box (<div>)

Can someone take a look at this code. I have problems like this popping up all over my site. Basically, I have a content div with some text in it and an inner div with some text and images in it. As I add text to the inner div it "grows" (I can tell because I added a colored border to it.) When I add images to the inner div the images flow outside of the inner box but stay within the main content div.

Thanks in advance for any help.

Code starts here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#outerbox{
float:right;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
border: solid 1px #f00;

}
#inerbox
{
margin: 0;
padding: 0 3% 0 0;
border: 1px solid #000;
}
/************** # imaging floating styles **************/
.floatright
{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px;
}
.floatleft
{
float: left;
margin: 10px 10px 10px 0px;
border: 1px solid #666;
padding: 2px;
}
-->
</style>
</head>

<body>
<div id="outerbox">
<p>Some paragraph text here.</p>
<div id="inerbox">
<p>Some paragraph text here.<img src="/courses/images/beekman-pic.jpg" width="251" height="189" class="floatleft" /></p>
<p>more here </p>
</div>
<div>
</body>
</html>

Problem with image flowing outside of box (<div>)

tobtob

penders

penders

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week