Layout elements next to particular paragraphs in text, without using tables

StackOverflow https://stackoverflow.com/questions/1402292

  •  05-07-2019
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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">
<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top