Markus Schneider: Höhenangabe für DIVs

Hallo,

bastle gerade an einer Seite:

Header
ContentDIV
   ContentDIV1 ContentDIV2
Footer

da ich für den ContentDIV eine andere Farbe als Hintergrund habe, wie für die beiden innenliegenden DIVs, habe ich festgestellt, dass dieser garnicht dargestellt wird. Was muss ich angeben, damit der umschliessende div mindestens so hoch ist, wie die beiden innenliegenden. Wahrscheinlich ein Standardproblem?

Dankeund Gruss

Markus

  1. Hi,

    Header
    ContentDIV
       ContentDIV1 ContentDIV2
    Footer
    

    diese symbolische Darstellung ist schon ganz nett, aber sie vermittelt nicht die nötige Information. Besser, du zeigst den tatsächlichen (auf das Wesentliche reduzierten) Code.

    Wichtig wäre vor allem auch das CSS dazu!

    Meine Kristallkugel ist diffus, aber mit etwas Mühe erkenne ich, dass du die beiden inneren div-Container möglicherweise gefloatet hast. Dann sind sie nämlich aus dem regulären Elementfluss herausgelöst und beeinflussen die Größe ihres Elternelements nicht mehr. Das gleiche passiert, wenn sie absolut positioniert sind.

    Um gezielt zu helfen, sollte man also zunächst wissen, was du wirklich gemacht hast.

    Wahrscheinlich ein Standardproblem?

    Wahrscheinlich. Aber welches von den in Frage kommenden? ;-)

    So long,
     Martin

  2. @@Markus Schneider

    Header
    ContentDIV
       ContentDIV1 ContentDIV2
    Footer
    

    Eine der Content-Boxen sollte kein <div> sein, sondern <main role="main">, um den Hauptinhalt auszuzeichnen.

    Ob für die anderen nicht auch <section> oder <aside> oder dgl. geeignet wären, lässt sich ohne den Inhlat zu kennen nicht beurteilen.

    Wahrscheinlich ein Standardproblem?

    Wahrscheinlich – wie @Der Martin vermutete – das Einschließen von Floats.

    Es gibt aber keinen Grund mehr, zum Nebeneinanderpositionieren von Boxes Floats zu missbrauchen – dafür gibt es Flexbox.

    Das in dem Artikel gezeigte Beispiel tut das, was zu willst. Zumindest in Bezug auf CSS; die Klassitis muss nicht sein.

    LLAP 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.