TOM: Wie kann ich einen DIV in einem DIV nach unten ausrichten?

Hi

folgendes Dokument:

<HEAD>
<TITLE></TITLE>
</HEAD>
<style type="text/css">
<!--
html {height:100%;}
body {height:100%;}
div {border: 1px solid black;}
#test1 {width:30%; height:30%; vertical-align: bottom;}
#test2 {width:50%; height:50%;}
-->
</style
<BODY>
<div id="test1"><div id="test2"></div></div>
</BODY>
</HTML>

So da hab ich mir jetzt vorgestellt, das das so ausschauene sollte:

---------------
|             |
| id1         |
|    |''''''''|
|    |        |
|    |    id2 |
|____|________|

Er positioniert den 2. LAyer aber nicht unten sonder oben :(

Was mach ich jetzt schon wieder falsch?

greets from Erlangen Central -- TOM

  1. hi

    html {height:100%;}
    body {height:100%;}
    div {border: 1px solid black;}
    #test1 {width:30%; height:30%; position:relative;}
    #test2 {width:50%; height:50%; position:absolute; bottom:0px; right:0px;}


    |             |
    | id1         |
    |    |''''''''|
    |    |        |
    |    |    id2 |
    |____|________|

    Was mach ich jetzt schon wieder falsch?

    vertical-align ist in CSS2 nur für Tabellenzellen.

    Grüße aus Bleckede

    Kai

    1. hi

      Hi

      html {height:100%;}
      body {height:100%;}
      div {border: 1px solid black;}
      #test1 {width:30%; height:30%; position:relative;}
      #test2 {width:50%; height:50%; position:absolute; bottom:0px; right:0px;}


      |             |
      | id1         |
      |    |''''''''|
      |    |        |
      |    |    id2 |
      |____|________|

      Was mach ich jetzt schon wieder falsch?

      vertical-align ist in CSS2 nur für Tabellenzellen.

      Danke. Du bist hier sowas wie mein CSS-Gott oder? gg
      Mhh... Je einfacher dir das fällt desto peinlicher is mir das sie fragen zu müssen :-P

      ...und dir fallen sie immer leicht *heul* ggg

      Grüße aus Bleckede

      Kai

      greetings from Erlangen Central -- TOM

    2. Hi

      <HEAD>
      <TITLE></TITLE>
      </HEAD>
      <style type="text/css">
      <!--
      html {height:100%;}
      body {height:100%;}
      div {border: 1px solid black; padding:0px; margin:0px; }
      #test1 {width:30%; height:30%; position:relative;}
      #test2 {width:50%; height:50%; position:absolute; bottom:0px; right:0px;}
      -->
      </style
      <BODY>
      <div id="test1"><div id="test2"></div></div>
      </BODY>
      </HTML>

      Das geht ja fast. Nur ca. 1 px bleibt es voneinander weg. Ich hab versucht daraus zu lernen was du mir gestern und vorgestern geschr. hast. OK - also padding und margin is jetzt 0. mhh... Was is denn jetzt da noch?

      greetings from Erlangen Central -- TOM

      1. Hi

        versuch mal negative Pixel angaben.

        Gruß
        Andreas Lubbe