Zweites Div ändert Weite nicht

[WernerK]

Hallo,

ich habe unten stehende Elemente. Ein Image und ein Label. Der Label soll rechts neben dem Image stehen. Daher habe ich das mit dem Float und den Divs so gemacht.
Das klappt auch soweit.
Was jedoch nicht geht und was mich wundert:
Beide Divs bekommen ja durch die erste CSS Angabe die Weite von 160px.
Warum greift aber dann nicht die zweite Weiten Angabe mit
saveDataImageSrc = 70px in der ich versuche das erste Div wieder zu verkleinern?

  
<div id="saveDataImage">  
 <div class="saveDataImageSrc">  
   <input name="img_SaveData" id="img_Data" type="image" src="img/1_Save_64.gif" alt="hinzufügen" title="hinzufügen">  
</div>  
<div class="saveDataImageLabel">  
<label for="img_SaveData">Hinzufügen</label>  
</div>  
</div>  

  
#saveDataImage div{  
	float:left;  
	width:160px;  
}  
.saveDataImageLabel{  
	padding-top: 25px;  
}  
.saveDataImageSrc {  
	padding-top: 25px;  
	width:70px;  
	background:#CF6;  
}  
  

Gruss
Werner

[Gunnar Bittersmann]

@@WernerK:

nuqneH

Warum greift aber dann nicht die zweite Weiten Angabe mit
saveDataImageSrc = 70px in der ich versuche das erste Div wieder zu verkleinern?

Weil der Selektor #saveDataImage div`{:.language-css}` eine höhere [Spezifität](http://wiki.selfhtml.org/wiki/CSS/Kaskade#Spezifit.C3.A4t_der_Regels.C3.A4tze) hat als .saveDataImageSrc{:.language-css}.

Qapla'

[WernerK]

Hallo Gunnar,

danke für den Hinweis.
Aber ich muss ja dem ersten Div <div id="saveDataImage"> eine Weite geben damit der "float=left" funktioniert.
Wie könnte man dann das zweite innere Div verkleinern bzw. eine andere Weite zuweisen?

Gruss
Werner

[Gunnar Bittersmann]

@@WernerK:

nuqneH

Wie könnte man dann das zweite innere Div verkleinern bzw. eine andere Weite zuweisen?

Mit einem Selektor, der gleich oder höher spezifisch ist wie ``#saveDataImage div{:.language-css}.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Wie könnte man dann das zweite innere Div verkleinern bzw. eine andere Weite zuweisen?

Mit einem Selektor, der gleich oder höher spezifisch ist wie ``#saveDataImage div{:.language-css}.

Die Kaskade sieht noch eine andere Möglichkeit vor. Aber !important sollte man nur in speziellen Fällen einsetzen, die hier nicht gegeben sind.

Qapla'

[Steel]

Hi!

Mit einem Selektor, der gleich oder höher spezifisch ist wie ``#saveDataImage div{:.language-css}.

wie oder als? Gleich spezifisch wie, hoeher spezifisch als. Ich haett mich da fuer als entschieden. Gibts dafuer ne Regel? "Der, oder die, Programmierer hat/haben einen Patch rausgebracht."?

[Gunnar Bittersmann]

@@Steel:

nuqneH

Mit einem Selektor, der gleich oder höher spezifisch ist wie ``#saveDataImage div{:.language-css}.

wie oder als? … Ich haett mich da fuer als entschieden.

Aber man sagt doch auch „höher wie“. *duck und weg*

Qapla'

[MudGuard]

Hi,

ich habe unten stehende Elemente. Ein Image und ein Label. Der Label soll rechts neben dem Image stehen. Daher habe ich das mit dem Float und den Divs so gemacht.
Das klappt auch soweit.
Was jedoch nicht geht und was mich wundert:
Beide Divs bekommen ja durch die erste CSS Angabe die Weite von 160px.
Warum greift aber dann nicht die zweite Weiten Angabe mit
saveDataImageSrc = 70px in der ich versuche das erste Div wieder zu verkleinern?

Wozu hast Du da überhaupt die inneren div-Elemente?

Wenn's nur um die Größenangabe für das Label geht: display:inline-block, dann greift auch hier width.

Dann brauchst Du kein float und kein clear ...

cu,
Andreas