4

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>

Here you can find an example.

So I have two divs, div1 and div2

The problem is the paragraph is too long so the div is pushed down. I want div2 to stay next to div1 on a normal screen (when the screensize is big enough). If the screen is too small (like on a mobile phone), div2 shoud go to the next line.

Isn't it possible that the width of the paragraph is limited to the width of its parent div, so div2 is still next to div1?

Btw, I don't want to set a (max-)width for the divs...

Thanks a lot!!

Wannes

Wannes
  • 1,019
  • 2
  • 11
  • 18
  • you are looking for media-queries (http://mediaqueri.es/). – Bastian Rang Feb 12 '13 at 10:18
  • It cant be fixed without applying width to internal div's, try #div1, #div2 {float:left; width 400px; margin-right: 10px;} as suggested below. – Kingk Feb 12 '13 at 10:46
  • width of the paragraph is always limited to its parent (unless you set any width) since it is a block element. your problem is you want to place div2 next to div1 when your browser size is big enough and it should go down if your browser size is not enough. This cannot be done by using CSS as I know. You have to go with scripting to handle it. – Faizul Hasan Feb 12 '13 at 10:54
  • @Kingk: Thanks, but my div's should have a dynamic width. I don't want to give them a fixed width. If the screen is big, the text should take the whole screen next to the image. If the screen is small, like on a mobile, the text should go under it. – Wannes Feb 12 '13 at 10:56
  • then use percent instead of pixel for defining width but i haven't tried that yet. lets see.. – Kingk Feb 12 '13 at 11:01

5 Answers5

2

Set width to div1 and p will adopt it. 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 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.

Jason Vasilev
  • 300
  • 1
  • 3
  • 12
  • Thanks, but my div's should have a dynamic width. I don't want to give them a fixed width. If the screen is big, the text should take the whole screen next to the image. If the screen is small, like on a mobile, the text should go under it. – Wannes Feb 12 '13 at 10:56
0

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

chead23
  • 1,859
  • 11
  • 12
  • No, when the browser is too small (like on a mobile), the div should go below the image. (I edited my post, because your remark was correct.) – Wannes Feb 12 '13 at 10:10
0

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.

Sergiy T.
  • 1,433
  • 1
  • 23
  • 25
  • Thanks for the answer, but div2 is allowed to go down when the screen is too small (for example on a mobile phone). But when there is space enough the text should be positioned next to div1. – Wannes Feb 12 '13 at 10:15
  • Then you should use (min-)width and float I think, so the browser know which width (in px or em) is smallest allowed for text-div. – Sergiy T. Feb 12 '13 at 10:33
  • If I set the min-width, it will not solve my problem. My text will still become as big as possible, which will lead in going under my div1... Thanks anyway! – Wannes Feb 12 '13 at 10:38
0

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

Murali
  • 136
  • 3
  • If I remove the float, it will not go down when I have a small screen (like on a mobile). Thanks anyway! – Wannes Feb 12 '13 at 11:12
  • It will go down, test once in mobile. I re-sized my browser and tested its working for me. – Murali Feb 12 '13 at 11:23
  • The text will go down, but not all on the same time. I wanted all or nothing :). Thanks for your help. – Wannes Feb 12 '13 at 11:27
0

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

Rob Audenaerde
  • 19,195
  • 10
  • 76
  • 121
  • @Wannes this idea might work. But have no proper understanding about what are the contents he is going to place inside div and the purpose Wannes is trying to use two div with floating. If there is no any specific reason this idea will work fine.. :) – Faizul Hasan Feb 12 '13 at 10:57
  • That's indeed a possibility, but this is a simplified piece of code. I really need two divs :). – Wannes Feb 12 '13 at 10:58
  • @Wannes , fine.. then you have to go with scripting to handle it :) – Faizul Hasan Feb 12 '13 at 10:59