Member Avatar for NewOrder

<table align="center" bgcolor="#FFFF66">
<tr>
<td >

<img src="../DatingGuy.jpg" align="right"/>
<pre>
Here's the deal— and it's one of the most amazing secrets of the Mystery Method because
it is so counterintuitive, running contrary to everything you've believed about attracting beautiful women your entire life,
in order for you to be permitted the audience of a beautiful woman to attempt to attract her,
you must first disqualify yourself from being considered a potential suitor by her.

If you don't do that, she will assume by your approach alone that you're after her.
And if you're after her, she knows that you per- ceive her as having high value.
And if her value is high, the odds are that it's higher than yours.
In other words, you will have low value, and you will be penalized,
not only just for approaching her but also for being nice.
At that point, you've already telegraphed that you're not worth it.
</pre>
</td></tr></table>

i try to align the whole text to the left with <pre>

i dont want to use many <br/> is there a solution?

  • 3 Contributors
  • 3 Replies
  • 206 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by NewOrder

Dani AI

Generated

Quick diagnosis: the original markup puts a long block inside a <pre> and uses presentational attributes for layout. A <pre> element preserves line breaks and literal spacing, so browser wrapping and normal <p> semantics won’t behave as expected — that explains ’s comment that <p> “doesn’t work.” is right to point away from table-based layout and toward CSS, and ’s margin suggestion is useful for spacing. Below are two practical, modern alternatives.

A simple "media" pattern (keeps image to one side, text flows in a normal paragraph block) using CSS flexbox:

<div class="media">
  <img src="DatingGuy.jpg" alt="Dating guy" class="media-img">
  <div class="media-body">
    <p>Here's the deal - and it's one of the most amazing secrets...</p>
  </div>
</div>
.media {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 700px;
  margin: 0 auto;
  background-color: #FFFF66;
  padding: 10px;
}
.media-img { width: 120px; height: auto; flex: 0 0 auto; }
.media-body p { margin: 0; }

If the original <pre> formatting must be preserved but wrapping is still required, change its whitespace handling instead of removing it:

pre.preserve {
  white-space: pre-wrap;    /* keep line breaks but allow wrapping */
  overflow-wrap: break-word;
}

Notes and troubleshooting: avoid align attributes and tables for layout (they are obsolete); prefer semantic elements and CSS. If true text-wrapping around an image (text flowing on both sides) is required, the traditional float-based approach achieves that behavior; otherwise the flexbox/media approach gives a predictable two-column flow and easier spacing control. Include an alt attribute for accessibility and remove escaped HTML so tags are parsed normally rather than shown as literal text.

Recommended Answers

All 3 Replies

Member Avatar for rajbdilip

You can use CSS instead.

<img src="source" style="float:left;">your text here!
Member Avatar for Kraai

I will try to help you, so let's see, your first question is, how to align a picture with your text to the left of a picture?

You should use this html tag:

<img src=”IMAGE URL” align=”right” /><p>Your text goes here.</p>

This will place your picture to the right with the text wrapped around it.

If you want to add margins to the pictures, so that there is some space between the text and the image, USE THIS:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

As for the <pre> tag:

The <pre></pre> tag creates text with the linebreaks and spacing that you put in.

When using the <pre></pre> tags, you will actually write in the spaces you want, like a WYSIWYG on the text.

To use it, you need to use the opening tag

<pre> And then 
     write your text     leaving spaces where you want it      like I am doing 

here     and then always close it again after your text</pre>

Hope this helps!

Edited by Kraai because: inserted code tags
Member Avatar for NewOrder

actually the <p></p> doenst work, it wont pass to another line, but put all the lines altogether

Edited by NewOrder because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.