mmofacts.com

Äußere und innere Divs

gepostet vor 17 Jahre, 3 Monate von Moogly
Hallo,
habe mich bis vor kurzem mit einem totalen Problem abgemüht und bin fast auf keinen grünen Zweig gekommen. Folgendes wollte ich umsetzen: Ein 1000px Div soll zentriert ausgerichtet sein und in diesem soll rechts ein Div sein, sozusagen als Menü. Ist der Content des Menüs nun länger, soll sich das äußere an das innere div in der Höhe anpassen.



  • Punkt 1

  • Punkt 2

  • Punkt 3



  • CONTENT BLA BLA BLA BLA CONTENT
    1.Versuch des CSS:

    .content {
    margin:auto;
    width:1000px;
    }
    .menu {
    float: right;
    }
    Perfekt, der 1000px Div ist zentriert, doch was ist das? Der äußere Div ignoriert den Inneren bei seiner Höhenberechnung.
    2.Versuch des CSS:

    .content {
    position: relative;
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    float: left;
    }
    .menu {
    .float: right
    }
    Klasse, es funktioniert. Doch was war der Trick? Beim "Googlen" habe ich rausgefunden, dass ein äußeres Div ein inneres Div in seiner Maßberechnung ignoriert, wenn dieses gefloatet ist und es selber nicht gefloatet ist. Im zweiten Versuch seht ihr am Ende der .content Klasse das float:left, dadurch funktioniert das Ganze.
    Vielleicht ist das Ganze einigen sowieso klar, doch mich hat es verwundert und viele graue Haare gekostet. Deshalb habe ich mir gedacht, ich poste es einfach mal.
    Gruß
    Moo
    gepostet vor 17 Jahre, 3 Monate von Moogly
    Es geht besser:
    Dabei hätte nen am Ende des äußeren div's gereicht
    gepostet vor 17 Jahre, 3 Monate von raufaser
    oder statt clear:
    overflow:visible
    Was den clear impliziert.

    Auf diese Diskussion antworten