Frage zum Thema float

    Ich habe hier einen HTML-Code




    Dazugehörig ist diese CSS:





    Mein Problem ist, dass außen herum um alle DIVs ein Rahmen definiert ist, der normalerweise in der Höhe auto ist.
    Das funktioniert auch soweit, bis ich bei


    .buchungsinfo_body und .buchungsinfo_preis


    ein float: left; setze, damit die beiden Felder nebeneinander sind. Im Ergebnis bleibt nur das DIV mit der Klasse .buchungsinfo_kopf vom Rahmen eingefasst. Die anderen DIVs liegen dann außerhalb des Rahmens. Wo ist mein Fehler? Hat jemand eine Idee?


    Danke für Eure Hilfe.

    Das Problem liegt darin begründet, dass du mit "float" das betreffende Element aus den Textfluss heraus nimmst und somit der Browser den Platz, den das Element im Textfluss einnehmen würde, eben ignoriert.
    Eine einfache... aber unschöne... Methode um das zu verhindern wäre, wenn du ein Element hinter das letzte gefloatete Element einfügst... zB ein <br>... und dem dann im CSS das Format 'clear: both;' zuweist, um das 'float' des vorherigen Elementes aufzuheben und den Browser zu zwingen eine Ausgabe (Zeilenumbruch) zu machen, die dann noch innerhalb des div '.buchungsinfo_rahmen' (hinter den gefloateten Elementen) eingefügt wird.


    Besser wäre allerdings auf Float zu verzichten und stattdessen die beiden Container mit 'Flex-Box' einzufügen...
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Ich hab mir mal versucht das Flex-Box anzuschauen. Jesses... das ist aber was größeres :)
    Ich hatte einfach gedacht, dass es einfach geht. Nun habe ich einfach in das DIV ne Tabelle gemacht. Damit besteht das DIV innen dann nicht aus 2 Nebeneinanderliegenden DIV's.
    Danke dennoch für Euere Hilfe.

    Hallo


    Zitat

    Ich hab mir mal versucht das Flex-Box anzuschauen. ...


    Die Verwendung von Tabellen oder Float ist in deinem Fall sachlich falsch.


    Tabellen sind nur für Tabellendaten gedacht und nicht zum layouten. Tabellendaten liegen nicht vor.


    Float ist nur dafür gedacht, damit Text andere Elemente umfließen kann, in der Regel Grafiken. Nicht um Container anzuordnen.


    Flexbox (das Flex-Modell) ist hingegen genau dafür gedacht Container anzuordnen.


    Du kannst deine Seite natürlich nach deinen Vorstellungen und deinem aktuellen Wissen erstellen und Flexbox ignorieren. Ein gutes, aktuelles, auf allen Endgeräten nutzbares Layout kannst du mit dem Mißbrauch von CSS nicht erstellen.


    Gruss


    MrMurphy