Limit The Paragraph Width To Its Parent Div

I have the following HTML-code:

Copy

To accomplish what you want you need to use min-width. Check the JsFiddle and try to drag the middle border to see the effect. This is by the advice of @Sergiy T. Otherwise you would really need to use scripts.

Solution 2:

If I understand correct you want to remove float:left on div2.

Solution 3:

To div1 fix width=300px and margin-right:10px. Remove float:left to div2.

Solution 4:

Put you image inside the second div, using float left.

Solution 5:

You may replace float:left with display:table-cell; vertical-align:top for your div1 and div2

Edit: I was able to almost achieve what you need with following code.

<div style="width:100%;">
<div style="float:left;">
    <img src="http://www.lappelducourty.be/test/wp-content/uploads/2013/01/siesta-300x225.jpg" />
</div>
<p>test</p>
<div style="display:table;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...] Sed in quam dolor. </p>
</div>

The tricky part is <p>test</p>. Without paragraph or with empty one text will not move to the bottom of the image when window is re-sized. I think any block element will do thougn not tested that. Still I do not know why it happens.

Share