How do I put a
beside an within a
?

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

score 2 · Answer 1 · answered Nov 14 '12 at 01:24

2

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

answered Nov 14 '12 at 01:24

jho1086

1,998
2
16
25

I can't use padding on the image because of the border-radius used, so this doesn't work. Thanks anyway. – Wookieguy Nov 14 '12 at 01:53
if that so please use margin. – jho1086 Nov 15 '12 at 12:10

zeyorama · Answer 2 · 2012-11-14T00:59:48.993

1

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!

edited Nov 14 '12 at 00:59

answered Nov 14 '12 at 00:46

zeyorama

444
3
12

Trying to see through the typos. :P So I should apply the css style "display: inline" to the paragraph? – Wookieguy Nov 14 '12 at 00:54
Tried it, and it didn't work. I would pursue it more, but the other solution worked fine. Thanks anyway. – Wookieguy Nov 14 '12 at 01:04

score 1 · Accepted Answer · answered Nov 14 '12 at 00:50

1

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

answered Nov 14 '12 at 00:50

Jon Mitten

1,965
4
25
53

That did the trick! Actually, the margin-left need not be the width of the paragraph, I set it to 15 and it did fine. Wonder why the float thing didn't work last time I tried... – Wookieguy Nov 14 '12 at 01:01
Now, is there any way to make the width of the paragraph change dynamically depending on say, the size of the image? In other words, it fills up the space it has. – Wookieguy Nov 14 '12 at 01:05
if you want dynamic sizing, you've got to go javascript / jQuery, or another programmatic mean. I recommend jQuery. One way to do it is to resize the text to fit a container: http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container – Jon Mitten Nov 14 '12 at 04:59

How do I put a beside an within a ?

3 Answers3

How do I put a
beside an within a
?