Force float:left on divs without "white-space:nowrap"

Question

There is something like this:

<div class="container">

    <div class="floating">
      
      <img src="image" alt="">
      
      <p>
          text...
      </p>
      
    </div>
    
    <div class="floating">
      
      <img src="image" alt="">
      
      <p>
          text...
      </p>

    </div>
    
</div>

I want the "floating" divs to float to the left of each other, even if they overflow the container.

I tried using "float:left" on the floating div but it didn't work. They stack on top of each other.

So I found a workaround using "display:inline-block" on the floated element and "white-space:nowrap" on the container, it worked but it didn't help my case.

.container{
    width:600px; 
    border:2px solid black;
    overflow:hidden;
    display:block;
    white-space:nowrap; /* delete this and see the actual floating divs layout*/
}

.floating{
    width:66%;
    display: inline-block;
}

img{
  width:120px; 
  height:120px;
  float:left;
}

In fact, "white-space:nowrap" prevents my text from wrapping the imgs in the floating div, which was the original intention. "white-space:nowrap" does what it's supposed to do, so this trick only seems to work if people don't care about wrapping content inside a div. But in this case I did.

So, in summary, if I leave the blank attribute, my 2 divs float like they should, but the content inside them gets messed up. If I don't use that attribute, the content inside the div will be retained, but the div won't float.

https://jsfiddle.net/8n0um9kz/

Is there any solution that would allow me to get what I want?

Thanks.

PS: I used 66% width for both floated divs in the example so you can see both for illustration. As far as I'm concerned, of course they're all 100%.

Answer 1

Yes. You have a solution.

Instead of using 'white-space : no-wrap' on the container, you can use 'display : flex' and 'flex-wrap :wrap' Containers allow items to advance to the next line when they reach the end of the container. Further use 'justify-content : flex -start'

Answer 2

This is how I understand it.

.container{
    width:600px; 
    display:flex;  //required
    align-items: flex-start; //optional
    overflow:hidden;
}

.floating{
    min-width: 66%; //required
}

img{
  width:120px; 
  height:120px;
  float:left;
}

The key is to use "min-width" instead of "width" and "display:flex" on the container.

No need to use blocks to display, remove floats, resize content, or wrap/expand anything.

"align-items: flex-start" is only required if the floating divs should maintain their respective heights, otherwise they will take the height of the tallest div. This isn't a problem unless you use a different background color for the floating div than the container.

https://jsfiddle.net/b83rzL07/1/

Thanks.