Da gibt es so etwas:

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

Ich möchte, dass die „schwebenden“ Divs links voneinander schweben, auch wenn sie den Container überlaufen.

Ich habe versucht, „float:left“ für das schwebende Div zu verwenden, aber es funktioniert nicht. Sie stapeln sich übereinander.

Also habe ich eine Problemumgehung gefunden, indem ich „display:inline-block“ für das schwebende Element und „white-space:nowrap“ für den Container verwendet habe. Es hat funktioniert, aber es hat mir in meinem Fall nicht geholfen.

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

Tatsächlich verhindert „white-space:nowrap“, dass mein Text die Bilder in das schwebende Div einschließt, was die ursprüngliche Absicht war. „white-space:nowrap“ tut, was es tun soll, daher scheint dieser Trick nur zu funktionieren, wenn es den Leuten egal ist, Inhalte in ein Div einzuschließen. Aber in diesem Fall habe ich es getan.

Also, zusammenfassend: Wenn ich das Attribut leer lasse, schweben meine beiden Divs wie sie sollten, aber der Inhalt darin wird durcheinander gebracht. Wenn ich dieses Attribut nicht verwende, bleibt der Inhalt im Div erhalten, aber das Div wird nicht schweben.

https://jsfiddle.net/8n0um9kz/

Gibt es eine Lösung, um mir zu bekommen, was ich will?

Vielen Dank.

PS: Ich habe im Beispiel für beide Floating-Divs eine Breite von 66 % verwendet, damit Sie beide zur Veranschaulichung sehen können. Für mich sind natürlich alle 100%ig.