DIVs mit position:absolute; in float:left; DIV positionieren

[BloodySword]

Hallo Leute!

Endlich habe ich mich auch mal hier registriert.
Nach langem Suchen in Google und hier bin ich immernoch nicht weiter gekommen:

Ich möchte DIVs mit absoluter Position in einem float:left; DIV positionieren, sodass top:0; left:0; auch oben links in diesem ContainerDIV ist.

Wie kann ich das mit DIV realisieren?

lg

[molily]

Wenn du dem Container position:relative; gibst, dann beziehen sich die top/left-Werte von position:absolute-Elementen darin auf die Kanten des Containers.

Mathias

[BloodySword]

Leider werden die DIVs dann immernoch wild auf die Seite verteilt angezeigt.

div.content {  
  border-width: 1px;  
  border-style: solid;  
  position: relative;  
}

Im DIV:

<div style="position: absolute; left: 471px; top: 113px; width: 293px; height: 184px;">

[ChrisB]

Hi,

Leider werden die DIVs dann immernoch wild auf die Seite verteilt angezeigt.

div.content {

border-width: 1px;
  border-style: solid;
  position: relative;
}

>   
> Im DIV:  
>   
> `<div style="position: absolute; left: 471px; top: 113px; width: 293px; height: 184px;">`{:.language-html}  
  
Soll das jetzt das selbe Div-Element sein?  
Dann würdest du ja hier nur die zuvor genannten Angaben wieder überschreiben.  
  
Mathias sprach von einem Containerelement - hast du verstanden, was damit gemeint war?  
  
Worauf [absolute Positionierung](http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position) Bezug nimmt, kannst du übrigens auch bei SELFHTML nachlesen.  
  
MfG ChrisB  
  

-- 
Light travels faster than sound - that's why most people appear bright until you hear them speak.

[BloodySword]

Soll das jetzt das selbe Div-Element sein?

Nein.

Mathias sprach von einem Containerelement - hast du
verstanden, was damit gemeint war?

Ja. Schau dir doch bitte mal die Klasse des Containter-DIVs an. Und die DIV de ich gezeigt habe hat die Klasse gar nicht, das DIV in dem Container-DIV drinnen.

[ChrisB]

Hi,

Schau dir doch bitte mal die Klasse des Containter-DIVs an. Und die DIV de ich gezeigt habe hat die Klasse gar nicht, das DIV in dem Container-DIV drinnen.

Ich kann ja nicht wissen, ob du wirklich 1:1 den Code gepostet hast.

Dann schau du dir mal die Tipps für Fragende an - und liefere eine Problembeschreibung, mit der sich was anfangen lässt.
Viel mehr als "funzt nich" sagt deine bisherige nämlich auch noch nicht aus.

MfG ChrisB

[BloodySword]

Was gibt es dort mehr zu erklären?

Ich habe die CSS-Formatierung für das Container-DIV gezeigt und ein DIV welches sich in diesem befindet. Mehr muss ich ja auch nicht angeben oder?

Mit einem iFRAME könnte ich dieses Problem lösen, leider ignoriert der Firefox dort die Höhenangabe gänzlich. Jegliche Versuche mit Javascript die Höhe auf die des Inhaltes anzupassen schlugen ebenfalls fehl.

Ich hoffe ihr könnt mir nun folgen.

lg

[ChrisB]

Hi,

Was gibt es dort mehr zu erklären?

Ich hab's verlinkt.

Ich habe die CSS-Formatierung für das Container-DIV gezeigt und ein DIV welches sich in diesem befindet. Mehr muss ich ja auch nicht angeben oder?

Wenn es funktioniert - nein.

MfG ChrisB

[BloodySword]

Warum muss ich mich denn wiederholen?

Ich habe doch geschrieben, dass er die DIVs relativ zu der Webseite ausrichtet und nicht nach dem Container-DIV, trotz des Tipps von Matthias.

Was ich genau machen möchte habe ich auch genaustens beschrieben. Was ich möchte ist ziemlich simpel, da gibt es nichts weiter zu erklären.

lg

[ChrisB]

Hi,

Warum muss ich mich denn wiederholen?

Warum muss ich das immer noch?

Ich habe doch geschrieben, dass er die DIVs relativ zu der Webseite ausrichtet und nicht nach dem Container-DIV, trotz des Tipps von Matthias.

Dann machst du wohl irgendwas falsch.

Was ich genau machen möchte habe ich auch genaustens beschrieben.

Stimmt. Und wie das geht, wurde dir auch beschrieben.

Was ich möchte ist ziemlich simpel, da gibt es nichts weiter zu erklären.

Stimmt schon wieder. Warum du es deshalb nicht hinbekommst, kann ich so auch nicht sehen.

Also bleibt nur - du beschreibst dein Problem jetzt endlich mal genauer als mit zwei hingeworfenen Code-Zeilen und der Feststellung "funzt nich"; oder du lässt es bleiben. Mir ist's inzwischen ziemlich egal.

MfG ChrisB

[BloodySword]

Tut mir Leid, es lag an dem Browser-Cache. Nach dem Löschen der "Privaten Daten" klappt es endlich mit der Positionierung.

Jetzt habe ich allerdings ein anderes Problem:

Das Container-DIV passt sich von der Höhe nicht an den positionierten DIVs die dort drin hocken an.

Bau des DIVs:

<table style="width:100%;">  
  <tr>  
    <td>  
      <div class="content" id="content">{$content}</div>  
    </td>  
  </tr>  
</table>

Die DIVs innerhalb werden selbstverständlich immernoch genau so mit position:absolute; vom WYSIWYG-Edtor erstellt.

Wie kann ich dem DIV zwingen sich an die Höhe des Inhalts anzupassen? Möglichst ohne JavaScript.

Weiß jemand Rat?

lg

[molily]

Das Container-DIV passt sich von der Höhe nicht an den positionierten DIVs die dort drin hocken an.

Das ist der Sinn von position:absolute: Man nimmt Elemente aus dem natürlichen Fluss. In diesem Fluss werden untereinander gelayoutet und ein Elternelement umfasst seine Kindelemente (Floating ist eine weitere Ausnahme). Wenn hingegen alle Kindelemente absolut positioniert sind, dann hat das Container-Element eine Höhe von 0, sofern keine fest gesetzt ist.

Wie kann ich dem DIV zwingen sich an die Höhe des Inhalts anzupassen?

Solange du position:absolute einsetzt gar nicht (ohne JavaScript).

Wenn du dein Anliegen genauer skizzierst, können wir dir möglicherweise eine Alternative vorschlagen.

Mathias

[Malcolm Beck´s]

hi,

Das Container-DIV passt sich von der Höhe nicht an den positionierten DIVs die dort drin hocken an.

Bau des DIVs:

<table style="width:100%;">

<tr>
    <td>
      <div class="content" id="content">{$content}</div>
    </td>
  </tr>
</table>

  
Wenn du #content meinst, dann kannst du das vergessen, denn die darin befindlichen absolut positionierten Elemente sind durch die absolute positionierung aus jeglichem Fluss genommen und haben daher keine wirkung auf das Eltern-Element.  
  
  
Wenn du mal erklären würdest, was dass Ziel ist und warum du absolut positionierst, könnte man u. U. eine Alternative ausarbeiten.  
  
mfg

-- 
\--