Reader Question: How to reduce line length?

I floated an image to the left with text on the right side of the image. The text goes all the way to the right side of the container. How can I reduce the length of the line of text?

---

I put a <br> after each line where I wanted it to end. It seems to have worked but will it cause other problems?

My Thoughts
The easiest way to reduce line lengths of text is to put the text inside a container that is sized to the width you want. Because Mike has set his text to wrap around an image, that image will need to be in the container as well. So, in this case Mike might write:

<p style="width:600px;">
<img src="image.gif" alt="image" style="float:left;" />
This is my text that will fill up the rest of the space in my paragraph that is 600px wide. If my image is 400px wide, then there is 200px on the right remaining for text.</p>

Notice that all I did was set a width style on the paragraph that surrounded the image and text. However, if there were multiple paragraphs of text that I wanted to shorten the line length, then I'd need to use a <div> tag around all of them:

<div style="width:600px;">
<p><img src="image.gif" alt="image" /> The text first paragraph.</p>
<p>The text second paragraph.....</p>
</div>

As for using multiple <br /> tags - this isn't a good idea. It's not how they were intended to be used in Web design, and they can cause problems, especially when your readers change the font size in their browser. Forced line breaks can make text illegible when the font size changes.

Other Ways to Affect Line Length

• Margins on the container element
• Padding in the container element

How do you manage your line lengths?
Do you think about line lengths and scan lines when you're building Web pages? What do you think is a good line length? Why not let us know by posting in the comments or answering Mike's post.