Geek Answers Handbook

The text inside the div will not be wrapped

As you can see here: http://jsfiddle.net/EhnuZ/ , the top group has short text, and the text is to the right of the image. The bottom group is identical, except that inside it has more text. However, this makes the text move below the image, instead of wrapping it as I want it. How can this be solved? I tried:

white-space:normal; word-wrap: break-word; width:50%; max-width:50%;
+4
source share
4 answers

You need to specify the width for the text container, otherwise it will automatically try to be 100% of the width.

 .text{ vertical-align:top; display:inline-block; width: 30%; }
+1
source

Without a width on <p> or in one of its contained elements, there is no reason for the browser rendering mechanism to prevent the element from expanding to fill its container.

What you want to do is limit the width of the parent paragraph by setting width or max-width

+1
source

Have you tried using float: left on your image?

0
source

The simplest thing I can think of is putting a picture and text in a table. For instance:.

  <table> <tr> <td> <img src="http://i0.kym-cdn.com/entries/icons/original/000/007/263/photo_cat2.jpg"> </td> <td valign="top"> <div class="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis ligula ut mi laoreet viverra sit amet non dolor. Vivamus quis velit elit. Aenean dignissim porttitor lorem, ac ullamcorper quam porttitor molestie</p> </div> </td> </tr> </table>
0
source

More articles:


All Articles