Limit paragraph width to parent div
I have the following HTML code:
<div style="width:100%">
<div id="div1" style="float:left">
<img src="http://www.lappelducourty.be/test/wp-content/uploads/2013/01/siesta-300x225.jpg">
</div>
<div id="div2" style="float:left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero lectus, varius placerat risus. Pellentesque condimentum dapibus fermentum. Nam eget magna nisl, a iaculis massa. Sed congue ultrices felis sed volutpat. Donec tristique ullamcorper ullamcorper. </p>
</div>
</div>
So I have two divs, div1 and div2
The problem is that this paragraph is too long, so the div is pushed down. I want div2 to stay next to div1 on a normal screen (when the screen size is large enough). If the screen is too small (eg on a mobile phone) div2 shoud goes to the next line.
Isn't it possible that the width of a paragraph is limited to the width of its parent div, so div2 is still next to div1?
Btw I dont want to set (max-) width for div ...
Thank you so much!
Wannes
source to share
Set the width to div1 and p . div2 also needs a width .
<style>
#mainContainer {
width: 100%;
}
#div1, #div2 {
float: left;
width: 45%;
min-width: 300px;
}
</style>
To accomplish what you want you need to use min-width. Check out the JsFiddle and try dragging the middle border to see the effect. This is as suggested by @Sergiy T. Otherwise, you really need to use scripts.
source to share
You can 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 the 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 hard part <p>test</p>
. Without a paragraph or with blank text, the text will not move to the bottom of the image when the window is resized. I think any block element will do nogn, haven't tested this. However, I don't know why this is happening.
source to share