Div-Layout Probleme

[bert]

Hallo Forum.

Ich habe ein Div-Layout erstellt:
                    _________________
 __________________|___NAVIGATION____|
|  ____     ______________________   |
| |    |   |                      |  |
| |DIV1|   |                      |  |  <
| |____|   |                      |  |  < Hauptdiv
|          |        DIV3          |  |  <
|          |                      |  |
|  ____    |                      |  |
| |DIV2|   |                      |  |
| |____|   |______________________|  |
|____________________________________|

Probleme macht das Div links unten. Im Quelltext habe ich die divs in der Reihenfolge erstellt, wie sie hier nummeriert sind.
Das Navigations-div, DIV1 und DIV3 machen auch keinerlei anstalten, nicht da zu sein, wo sie sein sollten.
Doch das DIV2 ist immer oben am Hauptdiv, und nicht unten, wo ich es eingezeichnet habe und wo ich es gerne haben würde.

Quelltextausschnitt:

_________________________________________________________

<style type="text/css">

div.alles
  {
   background-color:#E6F7FF;
   border:thick solid #000000
  }

div.DIV3
  {
   text-align:left;

width:75%;
   background-color:#FAE7E7;
   border:thin solid #000000;

margin-right:10px;
   margin-bottom:10px;
   margin-top:10px;
  }

div.DIV1
  {
   background-color:#BBE2FF;
   color:#000000;
   width:21%;
   font-weight:bold;
   float:left;
   margin:10px 0px 0px 10px;
   border:thin solid #000000;
  }

div.DIV1 table tr td:hover
  {
   color:#AA0000;
   border-left:thick solid #000000;
   background-color:#D4FFFF;
  }

div.DIV2
  {
   width:21%;
   margin:0px 0px 10px 10px;
   position:absolute;
  }

</style>

<div class="alles">

<!-- DIV1 -->
<div class="DIV1">
   [..]
</div>

<!-- DIV2 -->
<div class="DIV2" align="left">
  [..]
</div>

<!-- DIV3 -->
<div class="DIV3">
  [..]
</div>

</div>

__________________________________________________

Ich hoffe ihr könnt mir helfen. Das DIV2 soll einen margin-left von 10px und einen margin-bottom von 10px zum div "alles" haben, was mir leider nicht gelingt...

Ich freue mich auf jede Antwort

euer bert aus der Sesamstraße :)

[Heizer]

versuche es mal mit "bottom:10px" aber im IE geht das IMHO nicht

[Mathias Bigge]

Hi bert,

div.alles
  {
   background-color:#E6F7FF;
   border:thick solid #000000
  }

div.DIV2
  {
   width:21%;
   margin:0px 0px 10px 10px;
   position:absolute;
  }

Ich habe keine Ahnung von CSS, sehe aber in Deiner Definition nichts, was Dein DÌV2 an die gewünschte Position bringen sollte. Du musst es schon auf das Elternelement irgendwie beziehen.  Probier mal, es relativ zur Unterkante des Elterndivs zu positionieren.

position: absolute;
 bottom : 10px;
 left: 10px;

Oder wo Du es halt hinhaben willst.

Damits klappt, musst Du den ELternelementen auch eine Position verpassen, versuchs mal mit html, body, und dem Elterndiv mit nem position: relative ohne weitere Angaben.

Wie gesagt, ich habe keine Ahnung von CSS-Positionierung, aber vielleicht klappt's ja durch Zufall.

Viele Grüße
Mathias Bigge