Il y a quelque chose comme ça :

<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>

Je veux que les divs "flottants" flottent à gauche les uns des autres, même s'ils débordent du conteneur.

J'ai essayé d'utiliser "float:left" sur le div flottant mais cela ne fonctionne pas. Ils s'empilent les uns sur les autres.

J'ai donc trouvé une solution de contournement en utilisant "display:inline-block" sur l'élément flottant et "white-space:nowrap" sur le conteneur, cela a fonctionné mais cela n'a pas aidé mon cas.

.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;
}

En fait, "white-space:nowrap" empêche mon texte d'envelopper les images dans le div flottant, ce qui était l'intention initiale. "white-space:nowrap" fait ce qu'il est censé faire, donc cette astuce ne semble fonctionner que si les gens ne se soucient pas d'encapsuler le contenu dans un div. Mais dans ce cas, je l'ai fait.

Donc, en résumé, si je laisse l'attribut vide, mes 2 divs flottent comme ils le devraient, mais le contenu qu'ils contiennent est gâché. Si je n'utilise pas cet attribut, le contenu du div sera conservé, mais le div ne flottera pas.

https://jsfiddle.net/8n0um9kz/

Y a-t-il une solution pour obtenir ce que je veux ?

Merci.

PS : j'ai utilisé une largeur de 66 % pour les deux divs flottants dans l'exemple afin que vous puissiez voir les deux à titre d'illustration. En ce qui me concerne, bien sûr, ils sont tous à 100 %.