float floatet nicht richtig.../Tipp für CSS Layout gesucht

[Christian Seiler]

Hallo Elya,

Mein CSS-Layout soll etwas so aussehen:
__________________________
|    |                     |
|div |         div title   |
|navi|_____________________|
|    |                     |
|    |                     |
|    |       div content   |
|    |                     |
|__________________________|

Wenn Du möchtest, dass #navi eine feste Breite hat und der Rest variabel ist, dann hast Du ein Problem, wenn Du #title vor #navi deklarierst.

Lösbar wäre es so:

#navi {
  float: left;
  width: 200px;
}

#title {
  margin-left: 210px;
}

#content {
  margin-left: 210px;
}

<div id="navi">...</div>
<div id="title">...</div>
<div id="content">...</div>

Wenn Du dagegen #title vor #navi definieren möchtest, dann kannst Du nur mit Prozentwerten arbeiten; denn die float-Eigenschaft (egal, ob left oder right) funktioniert nur dann, wenn dem Element auch eine Breite zugewiesen worden ist.

Alternativ könntest Du natürlich absolut positionieren:

#title {
  position: absolute;
  left: 210px;
  right: 10px;
  top: 10px;
  height: 100px;
}

#navi {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 190px;
  height: 330px;
}

#content {
  position: absolute;
  left: 210px;
  top: 120px;
  right: 10px;
}

Mit absoluter Positionierung kannst Du die Elemente in beliebiger Reihenfolge anordnen. Allerdings kann es dann bei kleinen Fenstern zu unschönen überlappungseffekten kommen.

Viele Grüße,
Christian