Wolfgang: Einspaltiges CSS mit Divs

Beitrag lesen

Hallo liebe Forumsschreiber,
ich bastele seit einiger Zeit mit CSS herum (mit mehr oder weniger Erfolg), aber jetzt stehe ich vor einem völlig banalen Problem, das ich nicht zu lösen vermag. Vielleicht ist das reichlich peinlich - oder aber es geht gar nicht. Ich bitte Euch um Hilfe.

Ein Beispiel habe ich auf www.medicompex.at/cssTest hochgeladen.

Es besteht nur aus ein paar Zeilen Code, den ich ganz unten gleich einfügen werde.

Es besteht ein body tag mit einem background image (siehe: www.medicompex.at/cssTest/images/backgroundBanner.gif), welches nur über einen Teil der Seite reicht. (dieses Image ist aber im Beispiel leider verdeckt).

Einem p tag mit Text innerhalb eines divs

Einem weiteren div Tag, der unten am Boden einen farbigen Balken über den Rest der Seite erzeugen soll und daher eine farbe als Background definiert hat.

Das war´s auch schon.

Was ich möchte:
je nach Textlänge soll das div "bottom" unmittelbar unter dem Text beginnen, das ist alles. Ich habe etwa 3 Stunden!!! daran herumprobiert und es nicht hinbekommen.

Danke an alle, die sich meiner annehmen!

Hier noch der Code:

body {
 margin:0;
 padding:0;
 background: #f3f3f3 url(images/backgroundBanner.gif) repeat-x;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
}

#text {
 position:absolute;
 margin-left:350px;
 margin-top:170px;
 width:300px;
}

#gruen {
 color:#CADB5C;
}

#bottom {
 background:#600000;
 width:100%;
 height:500px;
}

</style>

</head>

<body>
 <div id="text">
  <p id="text">
   <strong>Lorem Ipsum</strong><br />
   <span id="gruen">Dummytext</span><br/>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
 </div>
 <div id="bottom">
 </div>
</body>