tags:

views:

67

answers:

1

So a webpage displays a long amount of text in paragraph format. The goal is place an element, such as a picture or bit of text, next to paragraph 17 or 26 without changing the paragraph in any way (i.e. the paragraph shouldn't have to wrap around it).

Thus far the best way to do this that I can see is wrapping the text in a table, a column for the text (and one paragraph on each row), and an empty that can be filled with the placed element by ID (the ID being a row number).

This seems rather clunky. For one thing, if the added element is longer vertically than the paragraph, a gap will be created in the original text. For another, each paragraph now looks like

<tr><td><p> garble fizz thoutrious</p></td><td id = "#"***></td></tr>

Can anyone think of a suitable alternative?

***Then with jQuery it's easy to grab that td id and fill it with whatever I want.

EDIT after Andre's answer:

So I have a series of paragraphs.

<p>Thing thing thing</p>
<p>Thang Thang Thang</p>
<p>Sing Sing Sing</p>
<p>Song Song Song</p>

I want to be able to add text or an image or some element to, say, the third paragraph, to get something like:

<p>Thing thing thing</p>
<p>Thang Thang Thang</p>
<p>Sing Sing Sing</p><img>
<p>Song Song Song</p>

With a layout like:

[p   ]
[p   ]
[p   ][img]
[p   ]

... where width is fixed

The problem I see with Andre's solution is that... actually, no, an empty span will fit fine, have an ID associated with the paragraph to which it's bound so that it can be filled as needed, and each paragraph can clear.

And there shouldn't be any gaps between [p ] when [img] is taller.

I'm going to test it out and then award the answer I think.

+1  A: 

Well, your mileage may vary with different browsers and how well they handle float and clear, but this worked fairly well with IE 7, Google Chrome, and FireFox 3.5:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>CSS Float/Clear example</title>
  <style type="text/css">
    p.firstParagraph
    {
      width: 50%;
      float: left;
    }

    p.secondParagraph
    {
      width: 50%;
      float: left;
    }
  </style>
 </head>
 <body>
  <p class="firstParagraph">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ante non massa vehicula sodales. Praesent blandit venenatis purus non mollis. Nunc consectetur urna quis eros sollicitudin rhoncus. Nulla in nulla nibh. Ut in eros erat. Donec pharetra ultricies lacus, quis tincidunt orci iaculis at. Suspendisse varius posuere diam sed feugiat. Sed eu ipsum massa, vel ultricies augue. Duis sem augue, faucibus sit amet suscipit id, ultrices nec augue. Sed vel diam quis risus venenatis congue vitae eget urna. Sed sapien nisi, hendrerit a euismod quis, iaculis eu enim. 
  </p>

  <p class="secondParagraph">
    Something else
  </p>
 </body>
</html>
David Andres
Hmm. That might work, though it's not quite what I meant. I'm readjusting the question to make it more clear.
Yokel
Considering your adjustment: sometimes a table is the right way to go. The approach I've given here works, until it doesn't...and then it becomes an excruciating trial of tweak and test until you "think" it looks like you intended on all the browsers you are targetting. Sometimes simplicity is best.
David Andres