[CSS] div mit absoluter Position untereinander ausrichten

[Luckie]

Ich habe auf meiner Freewareseite links drei Boxen mit div-Tags:

Code:

div.nav {
  position: absolute;
  top: 175px;
  left: 25px;
  width: 200px;
  padding: 5px;
  border-width: 2px;
  border-style: dashed;
  border-color: #B5C7DE;
  text-align: left;
}

div.news {
  position: absolute;
  top: 525px;
  left: 25px;
  width: 200px;
  padding: 5px;
  border-width: 2px;
  border-style: dashed;
  border-color: #B5C7DE;
  text-align: left;
}

div.banner {
  position: absolute;
  top: 750px;
  left: 25px;
  width: 200px;
  padding: 5px;
  text-align: center;
}

Ist es irgendwie möglich die Boxen News und Banner an der obersten Navigation automatisch auszuriochten? Sollte nämlich deren Inhalt ändern, muss ich manuell auch deren Positionen anpassen, was etwas blöd wäre.

[Marco Haffner]

Und wenn Du die drei Div-Layer mit einem vierten umgibst den Du, statt der drei einzelnen, absolut positionierst?

[Luckie]

Wie stellst du dir das vor? CSS ist nicht so meine Stärke.

[Marco Haffner]

Ungetestet, aber so in etwa dürfte es funktionieren.

Code:

#overall {
  position: absolute;
  top: 175px;
  left: 25px;
  width: 200px;
}

#nav, #news, #banner {
  width: 200px;
  padding: 5px;
  border-width: 2px;
  border-style: dashed;
  border-color: #B5C7DE;
  text-align: left;
}

Code:

<div id="overall">
  <div id="nav">
    ...
  </div>
  <div id="news">
    ...
  </div>
  <div id="banner">
    ...
  </div>
</div>

[Luckie]

Du kleines Genie, du.