3 Spalten-Layout - Mittleres div soll restlichen Platz ausfüllen

[toney]

Hallo,

ich möchte für eine neue Seite einen 3-spaltigen Header haben. Der wird erzeugt durch 3 Divs, die mittels float nebeneinander gesetzt werden. Das linke Div beinhaltet das Logo, das sich nicht ändern wird (also immer feste Breite). Im rechten Div soll ein Control Panel für angemeldete Benutzer zu sehen sein. Unter anderem wird darin der Benutzername des angemeldeten Users stehen, weshalb sich die Breite je nach Länge des Namens ändern kann. Also kann ich diesem Div keine feste Größe geben, und somit auch dem Mittleren nicht, da sich der gesamte Header über die Breite des Browsers erstrecken soll.

Dass das mittlere Div immer den Raum zwischen den andern beiden Divs einnehmen soll, aber das tut es nicht. Ich sitze jetzt schon ewig hier rum und probiere alles mögliche aus, doch nichts funktioniert.

Hier mein CSS:

#Header {
         height:40px;
         width:100%;
         margin: 0;
         padding: 0;
         background-color: #FFFFFF;
}

#Logo {
         min-width:200px;
         max-width:200px;
         border:1px [COLOR=#ff0000]#FF0000 solid;
[/COLOR]         float:left;
         text-align:left;
}

#TopNavigation {
         min-width:350px;
         height:40px;
         border:1px [COLOR=#00ff00]#00FF00[/COLOR] solid;
         text-align:right;
         float:left;
}

#CP {
         min-width: 250px;
         height:40px;
         border:1px [COLOR=#0000ff]#0000FF[/COLOR] solid;
}

Und das dazugehörige HTML:

   <div id="Header">
      <[COLOR=#ff0000]div[/COLOR] id="Logo"><h1>Test</h1></div>
      <[COLOR=#00ff00]div[/COLOR] id="TopNavigation">Link</div>
      <[COLOR=#0000ff]div[/COLOR] id="CP">cp</div>
</div>

Und zur besseren Verständnis noch ein Screenshot mit den farblich markierten Divs:


Ich bin für jede Hilfe dankbar...

Gruß,
toney

 

[Elroy]

Hallo.

Dein HTML ist falsch aufgebeut.
Erst das div Logo, dann das div CP und als letzte das div TopNavigation.

Das div Logo wird nach links gefloatet, das div CP wird nach rechts gefloatet dadurch rutscht das div TopNaviagtion in die Mitte.

Das Problem ist allerdings das du nur einem div eine Breite gibst und die beiden anderen sich den Platz teilen sollen so wie sie es gerade brauchen. Wie das gehen soll weiss ich echt nicht.

Ich kenne das nur mit Zwei festen breiten, aber vielleicht meldet sich ja noch jemand der eine Lösung hat.

Gruss
Elroy

 

[toney]

In der Mitte ist die Navigation ja schon, also sollte der Aufbau in dem Fall ja keine Rolle spielen (dem CP ein float:right zu geben hatte ich auch schon, sah soweit ich mich erinnern kann nicht sehr anders aus).

Was ich nur nicht verstehe ist:
Wenn ich den Divs kein float gebe, dann werden die zwar alle untereinander angezeigt, haben aber 100% Breite. Also warum hat ein Div mit float dann nur noch die Breite des Inhalts (bzw. des min-width)?! Sieht für mich irgenwie nach einem allgemeinen HTML-Bug aus (weil es in meinen Augen keinen Sinn macht), aber naja...

Noch eine Idee:
Wenn ich dem CP zusätzlich zum min-width noch ein max-width gebe, dann hat das ganze ja schon fast sowas wie ne Breite... Ist auf die Art noch irgendwas zu machen?

 

[threadi]

HTML ist nicht für CSS-Eigenschaften zuständig, folglich auch für nichts schuldig.

Wenn Du ein Element floatest, sagst Du dem Element, dass es von nachfolgenden umflossen werden kann. Somit muss es automatisch kleiner werden. Im Idealfall hat ein gefloatetes Element eine feste Breite. Moderne Browser können auch ohne das umgehen, Mindest- und Maximalbreiten sind auch möglich. Ist nichts davon angegeben, nimmt das gefloatete Element eben nur den Bereich ein den sein Inhalt beansprucht. Ist absolut richtig so. Im CSS.

Dem CP solltest Du keine Breite geben, höchstens eine Mindestbreite.