Immer dasselbe: <div>s

A

AmShaegar

0
Hallo,
ich versuche gerade ein 3-Spalten-Layout zu schreiben, welches Browserübergreifend funktioniert. Deshalb verzichte ich auf angaben wie float: left/right; und clear: both;. Das gibt nur wieder Ärger. Ich dachte mir, ich mach's ganz einfach über absolute Positionierung. Ich habe einen <div> #header, der ohne Probleme den Header darstellt. Dann #body, in dem sich die drei Spalten #left, #center und #right befinden und zum Abschluss #footer. Letzterer hat die selben CSS-Eigenschaften bekommen wie #header und steht im Quelltext unter #body.
Code: 
<body>
  <div id="header"></div>
  <div id="body">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
  <div id="footer"></div>
</body>
style_three.css
Beispiel mit Farben

Warum wird #body(im Beispiel schwarz) nicht so groß wie der größte <div>, der darin ist(#left, #center oder #right)? Dadurch verschiebt sich #footer nämlich nicht wie gewünscht unter den größten <div> aus #body, sondern ist direkt unter #header, also hinter rot und gelb versteckt. #body erhält die Höhe 0, was absolut nicht in Meinem Sinne ist. Weiß jemand Rat?
Es wäre alles so einfach, wenn alle Browser gleich interpretieren würden ...
 
Mit absoluter Positionierung nimmst du ein Element (A) ja aus dem Kontext seines Elternelements (B) raus. Die Ausmaße von A sind dann völlig frei, können die von B sogar überragen. B hingegen bekommt von all dem nix mit.

Wenn du ein flexibles Layout haben willst, dessen Ausmaße sich flexibel nach dem Inhalt der Elemente richten, kommst du um Floating nicht rum. Mit absoluter Positionierung kommst du nur weiter, wenn du feste Größen und Positionen für die Elemente vorgibst.
 
Hmm, das gefällt mir zwar nicht, aber danke für die einleuchtende Erklärung. Das macht durchaus Sinn. Ich hasse dieses Thema. Immer wieder muss man alles hinbasteln, wie's gerade passt :P
Dann werde ich wohl wieder auf float umsteigen und sehen, wie ich da ein einigermaßen universelles Layout hinbekomme.

Vielen Dank,
AmShaegar
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben