Wolfgang: Einspaltiges CSS mit Divs

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>

  1. Hi Wolfgang!

    Du hebst #text aus dem Dokumentenfluss. Damit #bottom erst unter #text anfängt musst du einen entsprechenden oberen Außenabstand definieren, z.B. margin-top:470px.

    Ich hoffe, ich habe dich richtig verstanden.

    MfG H☼psel

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
    1. Hallo H☼psel,
      vielen vielen Dank! Nur wenige Minuten nach der Frage gleich die Antwort und das am Sonntag!!!

      Irgendwie habe ich das wohl mit dem position:abolute falsch verstanden.

      Das margin war mir klar, hatte ich auch schon probiert, nur war es natürlich dann vom oberen Rand.

      Danke nochmal und einen schönen Sonntag,
      Wolfgang

      Hi Wolfgang!

      Du hebst #text aus dem Dokumentenfluss. Damit #bottom erst unter #text anfängt musst du einen entsprechenden oberen Außenabstand definieren, z.B. margin-top:470px.

      Ich hoffe, ich habe dich richtig verstanden.

      MfG H☼psel

      1. Hallo,

        vielen vielen Dank! Nur wenige Minuten nach der Frage gleich die Antwort und das am Sonntag!!!

        Die Rechnung kommt dann mit der Post :-)

        Gruß,
        Severin

        --
        They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety.
        -- Benjamin Franklin
  2. Hi,

    <div id="text">
      <p id="text">

    Die Werte von id-Attributen müssen dokumentweit eindeutig sein.

    </p>
    </div>

    Wozu soll das div überhaupt gut sein - sein einziger Inhalt ist der Absatz, also dürfte es ziemlich überflüssig sein.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.