Frage Float verändert body-tag

[Semso]

Hey Leute,

ich versuche gerade 3 Elemente (Text - Bild - Text --> in der Reihenfolge nebeneinander anzuordnen). Die Elemente sollen beim verkleinern des Fensters untereinander angeordnet werden (in der selben Reihenfolge).
Das Problem ist: Sobald ich float verwende verschiebt sich das body tag bzw. in Dreamweaver in der Live-Ansicht die Markierungen. Sprich: wenn man das body tag im Code markiert, zeigt Dreamweaver in der Live-Ansicht plötzlich nicht mehr den ganzen Bereich an, sondern ignoriert genau die Elemente. Wenn ich dann im Code weitere Elemente einfüge sind sie vor den 3 Elementen die ich nebeneinander anordnen möchte.
Ich hab noch ein Screenshot angehängt.
Der Text (dieses: abcabcabcabc..) unten im Bild ist im Code auch innerhalb des body tags, aber sobald float in css verwendet wird passiert das.

Und einen anderen Weg für mein Vorhaben was ich oben beschrieben habe gibt es ja kaum, oder weiß da jemand noch eine Alternative? Mit Flexbox rutschen die nicht untereinander beim Verkleinern.

Grüße

 

[Tronjer]

Die Liveansicht von DW solltest du nicht verwenden. Maßgeblich ist die Ansicht im Browser.

 

[Semso]

Danke für die schnelle Antwort.

Ich weiß, aber im browser ist es das selbe .

 

[bdt600]

Link zur Seite? Und bitte nicht mit dem Argument kommen, die Seite sei noch nicht online. Zur Not einen Freehoster nehmen.

 

[SpiceLab]

Mit Flexbox rutschen die nicht untereinander beim Verkleinern.

Zumindest nicht von alleine. Das wird mittels Media Queries geregelt.

Zur Erinnerung:

Die Texte und das Bild sollen sich allerdings beim verkleinern der Seite / des Browsers ab einer bestimmten Breite untereinander geschoben werden, und das auch in der selben Reihenfolge (der Text links soll dann ganz oben, das Bild in der Mitte und der Text rechts ganz unten als letztes platziert werden).

https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/

Flexbox nebeneinander: https://media.kulturbanause.de/blog/2013/07/flexbox-1.html

Flexbox untereinander: https://media.kulturbanause.de/blog/2013/07/flexbox-5.html

Gepaart mit: https://wiki.selfhtml.org/wiki/CSS/Media_Queries

Praxisbeispiel: http://thenewcode.com/css/flexbox

 

[Semso]

Zumindest nicht von alleine. Das wird mittels Media Queries geregelt.

Zur Erinnerung:


Praxisbeispiel: http://thenewcode.com/css/flexbox

Ich probier es dann nochmal damit, hab ich wohl was übersehen. Mit Flexbox war das ganz einfach zu lösen, danke nochmals dafür, außer wie gesagt dass die untereinander geschoben werden.

 

[SpiceLab]

Vermutlich hast Du die Media Queries gänzlich außer acht gelassen, um auf die skalierte Fensterbreite zu reagieren.

 

[Semso]

Perfekt, hat geklappt!
Ja, den Abschnitt habe ich wohl übersehen. Aber das ist genau das was ich wollte. Danke dir vielmals :) . Beschäftige mich schon eine gute Weile hiermit.
Ist Flexbox eigentlich schon kompatibel mit den meisten Browsern?

 

[threadi]

Ja, durchaus schon länger:
http://caniuse.com/#feat=flexbox