Make text below the image if it cannot be displayed with a specific width

Question

I have the following HTML code

<img src="xxxxx.png" style="float:left"/>
<p>Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. </p>

If the screen is wide enough, texts are displayed to the right of the image, which is good.

If the screen is narrow, texts are displayed below the image, which is good.

However, when the screen is in the transition stage (slightly wider than the image width), the texts are narrowed, displayed to the right of the image. How can I make sure that the texts can occupy the minimum width, say, 30em, otherwise let it be under the image?

Answer 1

You can use media queries.

img {
   float: left;
}

@media only screen and (max-width: ???px) {
   img {
       float: none;
   }
}

Here is the fiddle .

UPDATE

p float img, clear p:

@media only screen and (max-width: ???px) {
    p {
        clear: left;
    }
}

fiddle.

Answer 2

:. float:left display:table-cell, min-width ( ) width . , min-width width . " ", , .

* {
    font-weight: 600;
    color: orange;
    font-family: arial;
}

#image {
    width:400px;
    height:150px;
    float:left
}

#textbox {
    display: table-cell;
    width: 400px; 
    min-width: 200px;  
}

<img id=image alt=image src="http://i.imgur.com/HNj6tRD.jpg">
<p id=textbox>
    Some texts. Some texts. Some texts. Some texts. Some texts.
    Some texts. Some texts. Some texts. Some texts. Some texts.
</p>

Hide result

Answer 3

.

html

<div class="container">
    <div class="container--image pull-left">
        <img src="http://placehold.it/200x150">
    </div>
    <div class="container--content pull-left">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
</div>

Here is your css that makes the content more than 100% if the width is less than 500 pixels.

.container {
    width:100%;
}

.pull-left {
   float: left;
}

.container--image, .container--content {
   display: block;
}

.container--image {
   margin-right: 20px;
}

.container--content {
   width: 50%;
}

@media only screen and (max-width: 500px) {
    .container--content {
        width: 100%;
    }
}

Here is the fiddle .

Answer 4

No need to use media queries. You can simply add overflow: hiddenan element <p>to the desired width of the threshold like min-width.

img{
  float: left;
}
p{
  overflow: hidden;
  min-width: 50%;
}

<img src="https://placehold.it/200x100/984567/ffffff">
<p>Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. </p>

Run codeHide result