CODEWITHSUNDEEP
htmlimage
Wookieguy
Wookieguy

Reputation: 231

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

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; }

Upvotes: 4

Views: 4861

Answers (3)

jho1086
jho1086

Reputation: 2128

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

Upvotes: 2

zeyorama
zeyorama

Reputation: 445

paragraphs always starts behind the last object, the next object will also start nrhinf the paragraph.

try <img src="..."><span>Your text here</span> tag, This will be rendering inline!

sorry 2:00AM its too late for me today!

Upvotes: 1

Jon Mitten
Jon Mitten

Reputation: 2055

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; }

Upvotes: 1

Related Questions