How do I put a <p> beside an <img> within a <div>?

Question

I need to put a paragraph to the left of an image in an html page. Right now, the text is beside the image, but the paragraph itself extends behind the image to the left side of the container. I'd like them simply to be beside each other, inline, with the text in the paragraph wrapping like normal text does.

<div class="content-box">
            <h1>Welcome to Genesis of Robotics!</h1>
            <p>Unrelated text </p>
                <div id="holder">
                    <img id="problem-image" src="css/images/problem_image.jpg" width="500px" height="300px">
                    <p class="p">The Problem Text</p>
                </div>
            <img src="css/images/define.png" width="200px" height="200px">
            <img src="css/images/brainstorm.png" width="200px" height="200px">
        </div>

CSS:

#drawing-image {border-radius: 15px; }
    .content-box h1{color:#fff; text-align: center; margin: auto; width: 630px;    background: url(css/images/paper.png); padding: 12px; border-radius: 15px;}
    .content-box p{padding-top: 40px; padding-bottom: 40px;}
    #holder {height: 0px; width: auto; height: auto; }
    #holder p { height: auto; width: 100px; }
    #holder img { margin: 15px; }

Answer 1

How about this? #holder img { float:left; display:inline; padding-right:10px;} #holder p {display:inline;}

Answer 2

Assign a height and width to the paragraph, and add a margin-left of the width of the image, float the image and paragraph left, and you should have what you need.

#holder p { float:left;height: auto; width: 100px; margin-left:100px } #holder img { float:left;margin: 15px; }