Div in Div positionieren

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,
Ist es möglich ein DIV innerhalb einen anderen DIV beliebig zu platzieren? Angenommen ich haben DIV-A, er beinhaltet DIV-B. Die Größe sowie die Position von DIV-A ist anfangs unbekannt, aber DIV-B soll unabhängig davon immer 20 Pixel von der rechten unteren Ecke entfernt sein. Geht so was?
Grüße

2

Versuchs mal so:
(ich nenne den inneren Dib jetzt mal innen)

div#innen {
margin: 20px;
}

Was besseres fällt mir grad net ein, schau mal, obs so geht wie du es dir vorstellst.

3

Ne, Maxi. damit würde man die Box oben links plazieren. Er wollte es aber unten rechts. Aber dazu fällt mir nichts ein, wenn die Größe und Position der ersten box nicht bekannt ist.
Wenn du dich entscheiden solltest, die Zweite box oben rechts zu plazieren, würde der CSS-Stylesheet so aussehen.

     div#zwei {
       display: block;
       margin-right: 20px;
       margin-top: 20px;
       float: right;
     }

EDIT: Der HTML-Code sieht dann so aus:

<div id="eins">
   Grafik, text und was weis ich alles
   <div id="zwei">
      Alles was in die zweite Box soll
   </div>
</div>

Wichtig ist, das alles was in die erste Box soll, vor dem zweiten

kommt, sonst wird diese nicht richtig plaziert.

4

Folgender Code löst Dein Problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dein Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
DIV#aussen{
    height:200px;
    width:200px;
    background-color:#CCC;
    position:relative;
}

DIV#innen{
    height:50px;
    width:50px;
    background-color:#AAA;
    position:absolute;
    bottom:0px;
    right:0px;
}
</style>
<body>
<div id="aussen">
  <div id="innen"></div>
</div>
</body>
</html>

Mußt halt nur noch die Abstände anpassen.

5

Jo es tut, vielen Dank an alle.

Grüße

6

Ja, mit absoluter Position hatte ich mir auch überlegt. Aber das Problem ist, das evtl. Text, der im Außen-Div steht, dann verdeckt wird.
Außerdem geht dieses nur, wenn die Größen im Außen-Div definiert sind.:frowning:

Aber „derfragende“ scheint ja damit zufrieden zu sein.;Jump

7

Mit Javascript könntest du das per offsetwidth und offsetheight berechnen.