2 Div-Container in einem Div untereinander mit jew. fester Höhe

[Samuel fiedler]

Hallo JustMe28!

Zuerst einmal einige Fragen:

• Wie genau machst du das?
• Kannst du uns eine Seite schicken, in der wir deinen Code sehen?
• Oder den Code im Forum einfügen?

Ich kann mangelnden Codes nur spekulieren ^[1], was das konkrete Problem ist.
Ich schicke einfach, was ich coden würde.

Mein HTML im Body sähe etwa so aus:

<div id="elternDiv">
  <div id="kindDivEins"></div>
  <div id="kindDivZwei"></div>
</div>

Ich würde, wenn es genau so wie deine Angaben sein soll, folgendes ins CSS schreiben:

#elternDiv {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 180px;
  position: fixed;
}

#kindDivEins {
  top: 0px;
  left: 0px;
  width: 1200px;
  height: 150px;
  position: absolute;
  text-align: center;
}

#kindDivZwei {
  top: 150px;
  left: 0px;
  width: 1200px;
  height: 30px;
  position: absolute;
  text-align: center;
}

Das sollte dann so wie in einem JSFiddle Beispiel ohne Text bzw. einem JSFiddle Beispiel mit Text aussehen.

Ich sage noch, dass es keine gute Idee ist, alles absolut zu positionieren und sich auf Pixelangaben zu verlassen. Wenn du zwei 1200px große DIVs auf einem 200px × 400px großem Handy hast, gibt es einen großen Scrollbalken. Das lässt sich schon bei der Zentrierung des Textes bemerken:
Der Text ist bei dem Beispielfenster von JSFiddle in der von mir eingestellten Ansicht ganz weit rechts.

Wenn du dann eine h1 reinpackst, gibt es noch ein Problem:
Die h1 wird vom Browser so formatiert, dass sie wahrscheinlich mehr Platz als 150px bzw. 30px einnimmt.

Ich nehme an, entweder hast du einen ähnlichen Code, dann würde kein Problem existieren, oder du hast einen anderen Code, dann wären wir ein Schritt weitergekommen.

Jetzt warte ich erstmal auf eine Antwort von dir.

Au revoir,
Samuel Fiedler

---

1. Das Verb spekulieren passt gut zum weihnachtlichen Spekulatius! ↩︎