Foat und Breite bereiten Probleme

[mixit]

hi,
Ich habe zwei divs: die Navigation und der Inhalt. Der Inhalt wird immer angezeigt, die Navigation nur manchmal.
Mir stellt sich nun das Problem, dass wenn die Navigation nicht angezeigt wird, der Inhalt die ganze Seite ausfüllt und wenn dann die Navigation dazukommt, füllt der Inhalt immer noch die ganze Seite aus und rutscht aber einfach unter die Navigation und dies sollte nicht sein. Die beiden sollten nebeneinander sein und das div Inhalt immer die grösste mögliche Breite annehmen.
Hier noch ein Bild zur Veranschaulichung:
(oben wie es ist, und unten wie es sein sollte)

und hier noch der css Code der drei Elemente:
#sub_navi {
float: left;
margin : 5px 10px 5px 10px;
}
#text {
float: left;
margin : 5px 10px 5px 10px;
}
#content {
clear: left;
background : #FFFFFF;
width: 992px;
}
#content:after {
content:"";
display:block;
clear:left;
}

Ich mach ein ganz simples Cms und dort kann man dann sagen: Ich möchte eine Seite erstellen mit Navigation oder ohne. Um dann flexibel zu sein kann ich ja keine Angaben machen über die Breite des Elementes. Da wenn jemand auswählt ohne Navigation, dann sollte die Breite 100% sein, und wenn jemand auswählt mit Navigation dann sollte die Breite z.B. 75% sein.

Ich möchte eigentlich auf diese Angaben verzichten. Im IE funktioniert das auch wunderbar, nur halt in allen anderen Browsern nicht.

Ich hoffe ich konnte mein Problem verständlich schildern.

Kann ich dieses Problem irgendwie beheben? und wie?
mfg mixit

[Beat]

Ich habe zwei divs: die Navigation und der Inhalt. Der Inhalt wird immer angezeigt, die Navigation nur manchmal.
Mir stellt sich nun das Problem, dass wenn die Navigation nicht angezeigt wird, der Inhalt die ganze Seite ausfüllt und wenn dann die Navigation dazukommt, füllt der Inhalt immer noch die ganze Seite aus und rutscht aber einfach unter die Navigation und dies sollte nicht sein. Die beiden sollten nebeneinander sein und das div Inhalt immer die grösste mögliche Breite annehmen.

Du grösst mögliche Breite steht dem inhalt erst unter dem Float zur Verfügung.
Meinst du hingegen: die grösst mögliche Restbreite, so kannst du dies erreichen
a)
#content{
  float:none;
  margin-left:xyzem;
  } /* die Breite des Float elements*/

b)
#content{
  float:left;
  width:xyz%;
  /*xyz% = 100% - totalwidth(navi) - eigen(border+margin+padding) */
}

Ich mach ein ganz simples Cms und dort kann man dann sagen: Ich möchte eine Seite erstellen mit Navigation oder ohne. Um dann flexibel zu sein kann ich ja keine Angaben machen über die Breite des Elementes. Da wenn jemand auswählt ohne Navigation, dann sollte die Breite 100% sein, und wenn jemand auswählt mit Navigation dann sollte die Breite z.B. 75% sein.

Dein CMS muss hat das CSS File erstellen.

Ich möchte eigentlich auf diese Angaben verzichten. Im IE funktioniert das auch wunderbar, nur halt in allen anderen Browsern nicht.

Du solltest den Box-Model Bug des MSIE nicht als Grundlage nehmen und von Anfang an den richtigen Doctype und korrekten Code verwenden.

mfg Beat

[mixit]

Du grösst mögliche Breite steht dem inhalt erst unter dem Float zur Verfügung.
Meinst du hingegen: die grösst mögliche Restbreite, so kannst du dies erreichen

Genau ich meine grösst mögliche Restbreite.

a)
#content{
  float:none;
  margin-left:xyzem;
  } /* die Breite des Float elements*/

b)
#content{
  float:left;
  width:xyz%;
  /*xyz% = 100% - totalwidth(navi) - eigen(border+margin+padding) */
}

Doch so kann ich das nicht machen, da auf der Seite die das CMS erstellt auf einigen Unterseiten die Navigation eingeblendet, bzw. ausgeblendet wird.

Natürlich will ich nicht mit auf den Fehlern des IE aufbauen. Es hat mich nur gewundert, dass einmal der IE es so darstellt, wie ich es will und die anderen nicht.

[Beat]

Doch so kann ich das nicht machen, da auf der Seite die das CMS erstellt auf einigen Unterseiten die Navigation eingeblendet, bzw. ausgeblendet wird.

Wir stossen an die Grenzen.
An dieser Stelle ist ohne JS kein weiterkommen.

Dein CMS müsste in der Lage sein, dir für die verschiedenen Situationen Klassen zu setzen. Ohne dies und ohne JS ist kein Weiterkommen.

No Liquid Design with CSS alone. Das ist die simple Wahrheit.

Ich habe mein eigenes Layout an diese Situation wie folgt angepasst:
(was bei dir die Navi, das bei mir der Sidebar)

Wenn JS ausgeschaltet:

• stelle Content und Sidebar als display:block dar

Wenn JS verfügbar

• ermittle die Viewportbreite
    entscheide ob Content und Sidebar je als display:inline-block
    mit width:70% bzw width:30% dargestellt werden können.
    wenn Bildschirm zu schmal, bleibe bei Block.

Ich muss einfach sagen. CSS allein bietet dir keine Antwort auf die
unterschiedlichen Ausgangsbedingungen.

Link zu meiner Demo-Seite:
http://www.elcappuccino.ch/privat_ec/save-js2col-layout.html

mfg Beat;

[mixit]

Wir stossen an die Grenzen.
An dieser Stelle ist ohne JS kein weiterkommen.

No Liquid Design with CSS alone. Das ist die simple Wahrheit.

Genau das habe ich befürchtet. Gut dann bleibt mir nichts anderes übrig als mehrere Klassen, je nach Situation zu erstellen.

Herzlichen Dank
Gruss mixit

[ChrisB]

Hi,

Ich mach ein ganz simples Cms und dort kann man dann sagen: Ich möchte eine Seite erstellen mit Navigation oder ohne. Um dann flexibel zu sein kann ich ja keine Angaben machen über die Breite des Elementes. Da wenn jemand auswählt ohne Navigation, dann sollte die Breite 100% sein, und wenn jemand auswählt mit Navigation dann sollte die Breite z.B. 75% sein.

D.h., die Navigation waere dann immer 25% breit - egal, ob sie so viel Platz braucht, oder nicht?

Waere es da nicht besser, die Navigation so viel Breite einnehmen zu lassen, wie sie braucht - und den Inhalt einfach daneben beginnen zu lassen?

MfG ChrisB