Div höhe automatisch dem Inhalt anpassen.

    Hallo zusammen,


    zunächst um die Seite die es hier geht: www.bjuicy.biz .


    Ich habe mir die Seite so aufgebaut das ich eine Box im Hauptinhaltsberreich habe in der Main und Aside liegt.


    Ich habe mir gedacht ich baue die Divs so auf das wenn ich den Inhalt einfüge sich die Höhe automatisch anpasst.
    Allerdings liegt der Text darüber und die Divbox passt sich nicht der höhe an. Nach meiner Logik geht alles auf,
    das tut es aber nicht. Ich habe da irgendwo einen Logikfehler und finde diesen nicht.


    Kann mir jemand auf die Sprünge helfen?
    Ich bringe an der Startseite einen Beispielinhalt ein damit das Problem ersichtlich wird.


    Bitte helft mir, ich bin am verzweifeln.

    Hallo


    Die Beispielseite enthält keinen Inhalt, das Problem ist deshalb nicht direkt nachvollziehbar.


    Das hat zwar mit deinem Problem nichts zu tun: Aber du verwendest Elemente teilweise in unzulässiger Weise. Damit solltest du dich noch mal beschäftigen. In den HTML-Grundlagen ist relativ genau bestimmt, wann welche Elemente verwendet werden dürfen.


    Grundsätzlich gilt folgendes:


    Wenn zwei Elemente (main, aside) nebeneinander angezeigt werden sollen, dürfen sie zusammen nicht breiter als das umgebende Element (div.website) sein.


    Da main (980px) so breit wie das umgebende div.website (980px) ist passt daneben kein weiteres Element.


    Zusätzlich ist main ein Blockelement. Selbst wenn main und aside zusammen weniger als 980px Breite haben stehen sie dennoch untereinander.


    Deshalb müssen beide Elemente gefloatet werden, damit sie beide aus dem Dokumentenfluß genommen werden.


    Zusätzlich muss das floaten aber vor dem ersten nachfolgenden Element beendet werden, welches unterhalb der gefloateten Elemente stehen soll. Sonst kann es auch neben die gefloateten Elemente rutschen. Merksatz: Kein Float ohne Clear.


    Da die Auswirkungen von float immer wieder unterschätzt werden noch der Hinweis auf einen ausführlichen Beitrag dazu:


    http://www.andreas-kalt.de/webdesign/tutorials/float-theorie


    Insgesamt solltest du dich auch mit Flexbox beschäftigen.


    Gruss


    MrMurphy

    Danke für die schnelle Reaktion,


    sorry, ich sehe gerade ich hatte die falsche css datei hochgeladen. Jetzt ist die richtige drinnen.
    Float hatte ich benutz, genauso wie clear.


    kurz das Boxmodell:


    Die Box wo main und aside drinnen sind, ist div#main, diese divbox soll die höhe automatisch anpassen.


    darin sind main und aside, diese sind auch gefloatet.
    darunter der footer dieser wurde mit clear:both verwendet.


    Wie man jetzt sieht sind die zwar Elemente sind nebeneinander, aber div#main verändert die größe nicht.
    Das ist mein Problem.

    Hallo


    Zitat

    aber div#main verändert die größe nicht


    Warum liest du meine Antwort nicht?


    Zum Beispiel


    Zitat

    Da die Auswirkungen von float immer wieder unterschätzt werden ...


    und


    Zitat

    damit sie beide aus dem Dokumentenfluß genommen werden


    Mit float werden main und aside aus dem Dokumentenfluß genommen und andere Elemente können deshalb nicht mehr auf sie reagieren. Das gilt natürlich auch für umgebende Elemente. Deshalb sind für das umgebende Element main und aside kein Inhalt mehr, auf das es reagieren kann.


    Das ist alles in dem von mir verlinkten Beitrag beschrieben. Wenn du float anwenden willst solltest du den verstanden haben. Ansonsten wird dir float regelmäßig Probleme bereiten.


    Gruss


    MrMurphy

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden