Anordnung einzelner Div-Elemente ohne Überlappung

[Steel]

Hi!

Dein Probelm war folgendes:

ein mit absolute formatiertes Element wird aus dem Dokumentfluss genommen. Es vergroessert dann auch nicht das umschliessende Elternelement und ragt darueber hinaus. Auch alles andere fliesst darunter durch (drueber weg - je nach z-index). Deshalb ragen deine laengeren Kommentare in den Bereich darunter und ueberlappen sich.

Die Loesung von Suit ist ein Layout fuer eine standard 2 Spaltenloesung mit Kopf und Fuss.

Das hier sollte etwas naeher an deinem momentanen Code liegen:

.artikel {  
  clear:both;  
  width: 800px;  
  margin-right:50%;  
  
  background-color: blue;  
}  
  
.kommentare {  
  float: right;  
  width: 50%;  
  background-color: yellow;  
} 

<div class="artikel">  
  <div class="kommentare">Kommentare</div>  
  <h1>Titel</h1>  
  <p>Artikel</p>  
  <p>Author</p>  
</div>

Eine Loesung mit Wrapper und eigenen Containern fuer Artikel und Kommentaren, wie man sie bei Suits Vorschlag sieht, ist natuerlich auch eine Moeglichkeit. Gerade wenn man es nicht mag, dass die Kommentare, die ja rechts vom Artikel sind, davor notiert werden.

Viel Erfolg!