when you have a longer image than text

[rbragg]

I have a parent div and a child div. I am inserting an image and text in the child. However, if the text is shorter than the image, the image hangs out of the child and parent box. How can I prevent this?
#middle_parent {
min-width:200px;
margin:5px 146px 20px 155px;
background-color:transparent;
border:1px solid black;
padding:5px;
}
#middle_child {
background-color:#FFFFFF;
padding:5px;
border:1px dotted #2966A3;
}

[ray326]

Put the image in the child box.

[rbragg]

Thanks for your reply. As I've said before, I am inserting the text and the image in the child box.

[DenverUX]

I tried to replicate this but I could not. I'm using IE7 and it seems to be working as it should. I didn't check it in any other browsers.

You may want to play with the display: attributes and/or post the html. Also, what browser are you using?

[ray326]

As I've said before, I am inserting the text and the image in the child box.Then you're doing something to take the image out of the flow like floating it.

[rbragg]

I first test in Firefox but I have the same problem in IE 6.0. I tried different display attributes to no avail.

Here is the html:
<div id="middle_parent">
<div id="middle_child">
<p class="style3">- MARY BOONE -</p>
<img src="staff/Mary2.gif" hspace="5" align="left">
<p class="style2">Records Clerk</p>
<p class="style1">blah blah blah</p>
</div>
</div>

[Centauri]

The align on the image is floating it, and this float needs to be cleared - easiest to use overflow:hiddin on the child. Also, rather than use the deprecated styling of the image, include it in the css as well. The person's name and occupation should really be header elements to have semantic meaning. <div id="middle_parent">
<div id="middle_child">
<h1>- MARY BOONE -</h1>
<img src="staff/Mary2.gif">
<h2>Records Clerk</h2>
<p class="style1">blah blah blah</p>
</div>
</div>




#middle_parent {
min-width:200px;
margin:5px 146px 20px 155px;
background-color:transparent;
border:1px solid black;
padding:5px;
}
#middle_child {
background-color:#FFFFFF;
padding:5px;
border:1px dotted #2966A3;
overflow: hidden;
}
#middle_child img {
float: left;
margin: 0 5px;
}


Cheers
Graeme

[rbragg]

This was a pefect explanation as usual, Centauri. Again, thanks.