css reihenfolge

[patrick123]

Hallo, kurze frage undzwar übe ich gerade html/css und hab leider ein Verständnissfehler.

Ich habe hier in meiner externen css Datei eine id vergeben die aber nur funktioniert wenn diese ID mit Anweisung "on top" steht, wenn ich diese ID nach unten schiebe dann wird sie nicht erkannt, woran liegt das, dass habe ich noch nicht versanden. Hier einmal der Quelltext und zwar geht es um "#erstaunlich" wenn ich es so positioniere wie hier, funktioniert es, jedoch wenn ich es unter die Familie der "#elixire" packe, wird es nicht umgesetzt, woran liegt das?

body {
  font-size:           small;
  font-family:         Verdana, Helvetica, Arial, sans-serif;
  line-height:         1.6em;
}

h1, h2 {
  color:               #007e7e;
}

h1 {
  font-size:           150%;
}

h2 {
  font-size:           130%;
}
#erstaunlich {
width: 200px;

}
.garantie {
  font:    small/1.6em Verdana, Helvetica, Arial, sans-serif;
  color:               #444444;
  border:    white dashed 1px;
  background-color:    #a7cece;
  padding:             25px;
  padding-left:        80px;
  margin:              30px;
  margin-right:        250px;
  white url(bilder/hintergrund.gif) repeat-x;
}

#fusszeile {
   font:   small/1.6em center green Verdana,Helvetica, sans-serif;
   margin:   30px 0 0 0 ;
   }

#elixire {
   float: right;
   line-height: 1.7;
   border-width: thin;
   border-style: solid;
   border-color: #007e7e;
   width: 200px;

padding: 0 20px 20px 20px;

margin: 0 0 0 20px;

text-align: center;

background-image: url(bilder/cocktail.gif);
   background-repeat: repeat-X;

}

#elixire h2 {
   color: black;

}

#elixire h3 {
  color:  #f00;
}

#elixire a:link {
color: #007e7e;
}

#elixire a:visited {
color: #333;
}

#elixiere a:hover {
background: #f88396;
color: #0d5353;

.cd {
font-style: italic;
}

.interpret {
font-weight: bold;
}

a:link {
color: #0f0;
}

a:visited {
color: #f00;
}

a:hover {
color: yellow;
}

Vielen dank für eure Hilfe!
Patrick123