CSS formatiert <DIV>s mit 'display:inline' nicht

[Pierre Dole]

Hallo Leute,
ich bin am verzweifeln, nein, ich am ausflippen...

Folgender CSS-Code:

  
#topCol {  
	background-color: #000000;  
	display: block;  
	width: 950px;  
}  
  
#leftCol {  
	background-color: #DDDDDD;  
	display: inline;  
	width: 220px;  
}  
  
#mainCol {  
	background-color: #BBBBBB;  
	display: inline;  
	width: 100%;  
}  
  
#rightCol {  
	background-color: #999999;  
	display: inline;  
	width: 220px;  
}  

die HTML-Template dazu:

  
<div id="topCol">{top}</div>  
<div id="leftCol">{left}</div>  
<div id="mainCol">{main}</div>  
<div id="rightCol">{right}</div>  

Ich glaube es ist selbsterklärend was ich erreichen möchte. Nun, topCol macht er richtig, den Rest fasst er nicht an. Gut, denk ich mir, der einzige Unterschied zwischen den Formatierungen von topCol und den anderen ist das 'display'. Habe somit 'inline' mit 'block' ersetzt und auf einmal nimmt er die Formatierung an. Ändere ich es wieder zurück, sehe ich weder die Hintergrundfarbe noch stimmt die Breite. Nehme ich das display aus der Definition heraus, wird auch nicht formatiert.
Was zur Hölle geht hier schief!?

PS: bevor sich einer über die Farben totlacht, die sind nur zum Gucken da, ob alles stimmt.

[Beat]

Was zur Hölle geht hier schief!?

Deine Vortstellung von width und height bei inline Elementen.
Verwende display:block oder inline-block, wenn du eine dimensionierbare Blockbox darstellen willst

mfg Beat

[Gunnar Bittersmann]

@@Pierre Dole:

nuqneH

Was zur Hölle geht hier schief!?

Nichts. Works as designed: „'width' […] Angewendet auf: Alle Elemente, außer auf nicht-ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen“ [CSS2 §10.2]

Auf Elemente mit 'display: inline' hat 'width' keine Wirkung. [CSS2 §10.3.1]

Möchtest du 'display: inline-block' verwenden? [INLINE-BLOCK]

Qapla'

[Pierre Dole]

Thx, hat mir geholfen. Vielleicht weist du noch einen Trick, wie das mit den 100% hinbekomme? Ich möchte, dass mainCol den Platz ausfüllt, wenn ich z.B. 'rightCol.display = none' mache.

[Beat]

Thx, hat mir geholfen. Vielleicht weist du noch einen Trick, wie das mit den 100% hinbekomme? Ich möchte, dass mainCol den Platz ausfüllt, wenn ich z.B. 'rightCol.display = none' mache.

Da du bereits JS einsetzt, kannst du mit dem gleichen JS dem anderen Element eine Klasse verpassen, die das beinhaltet.

mfg Beat

[Pierre Dole]

Da du bereits JS einsetzt, kannst du mit dem gleichen JS dem anderen Element eine Klasse verpassen, die das beinhaltet.

mfg Beat

Ist etwas wage beschrieben. :) Wo ist der Unterschied, wenn ich die 100% in der css-Datei definiere oder per JS?

[Cheatah]

Hi,

Wo ist der Unterschied, wenn ich die 100% in der css-Datei definiere oder per JS?

der Unterschied ist, dass Du bei der einen Variante die absolut sinnhafte Trennung von Logik und Layout bewahrt hast, bei der anderen Variante jedoch nicht.

Cheatah