By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,463 Members | 771 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,463 IT Pros & Developers. It's quick & easy.

How to start text below an image?

P: n/a
Hi everybody,

This is probably a very simple question, but after a long time of trying
I'm afraid I still have not found a solution.

Have a look at the following page:
http://users.pandora.be/esreverian/test/image.html - it contains an image,
and has three <p>'s of text next to it.

How can I force paragraph three to start below the image? A break does not
work.

I can add paragraphs until it reaches below the image, but:
1) that feels like cheating
2) is flawed when the text changes
3) is probably not only the dumb way, but harder then the real way :)

Could anybody please tell me how to do this?

Thanks in advance!

Ikke
Sep 18 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Ikke wrote:
This is probably a very simple question, but after a long time of
trying I'm afraid I still have not found a solution.

Have a look at the following page:
http://users.pandora.be/esreverian/test/image.html - it contains an
image, and has three <p>'s of text next to it.

How can I force paragraph three to start below the image? A break
does not work.
CSS:
..imgleft {
background-color: transparent;
color: #708090;
font-size: 90%;
padding: 1em;
text-align: center;
}

HTML:
<p <!-- image inside first paragraph -->
<span class="imgleft">
<img src="../images/yourimage.jpg" alt="..." title="..." width="100"
height="100">
<br>Caption if desired
</span>
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
2. Etiam luctus suscipit ipsum. Nam tellus eros, consectetuer a,
vulputate quis, condimentum nec, augue. ...
</p>
<p style="clear:both;>
3. Nullam nonummy arcu in nisi. Integer vitae turpis. Nam ...
but why would you want to disrupt the flow and force this one below the
image? Personally, I would leave out the 'clear:both;'
</p>

Though if you really want those leading numbers, why don't you use a
list?

--
-bts
-Motorcycles defy gravity; cars just suck.
Sep 18 '06 #2

P: n/a
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote in
news:2h*********************@bgtnsc04-news.ops.worldnet.att.net:

<snipped>

Thank you very much - it works like a charm!
Though if you really want those leading numbers, why don't you use a
list?
Those numbers were there just for the sake of identifying the paragraphs,
the contents of the div would just be text. It would be a lot better to use
a list, if the numbers would be left in.

Thanks again,

Ikke
Sep 18 '06 #3

P: n/a
Ikke wrote:
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:
><snipped>

Thank you very much - it works like a charm!
In my haste to cut'n'paste, I missed some lines:

..imgleft {
float: left;
}
..imgright {
float: right;
}

Sorry about that. <g I use this method all the time in my sites.
>Though if you really want those leading numbers, why don't you use a
list?

Those numbers were there just for the sake of identifying the
paragraphs, the contents of the div would just be text. It would be a
lot better to use a list, if the numbers would be left in.
Oh, ok. :-)

--
-bts
-Motorcycles defy gravity; cars just suck.
Sep 19 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.