CODEWITHSUNDEEP
htmlcss
Jack S.
Jack S.

Reputation: 2793

Text inside div won't wrap

As seen here: http://jsfiddle.net/EhnuZ/ the top group has a short amount of text, and the text is to the right of the image. The bottom group is identical except that it has more text inside. However, this causes the text to shift below the image, instead of wrapping like I want it to. How can this be solved? I have tried:

white-space:normal;
word-wrap: break-word;
width:50%;
max-width:50%;

Upvotes: 5

Views: 14779

Answers (3)

jackwanders
jackwanders

Reputation: 16020

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

What you want to do is constrain the width of the paragraph of its parent by setting a width or max-width on it

Upvotes: 1

Scillon
Scillon

Reputation: 320

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

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

Upvotes: 2

Maude
Maude

Reputation: 522

Have you tried using float:left on your image?

Upvotes: 0

Related Questions