• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Div-Container soll sich nach links statt nach rechts vergrößern

H

Horlok

New member
Hallo zusammen

gibt es eine Möglichkeit, das ein Div-Container sich auch noch oben und links vergrößert, wenn ein dynamischer Inhalt mehr wird? Also das der Ankerpunkt eines Divs rechts unten ist und an seiner Position bleibt. Standardmäßig ist es ja die links obere Ecke.

Gibt es dafür eine einfache Div-Eigenschaft oder muss ich da tricksen und das über das Auslesen der Div-Größe machen und dann das Div entsprechend nach links und oben verschieben?

Danke und Gruß
 
Nach oben statt nach unten vergößern ist mit CSS kein Problem:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body style="padding: 40px;">
das hier wird unter dem Div teilweise verschwinden
<div style="position: relative; height: 1em; width: 100px;">
<div style="position: absolute; bottom: 0; right: 0; background-color: blue;">
hier ist viel Text drin, der das div immer höher und höher macht
</div>
</div>
</body>
</html>
das mit dem nach links hab' ich nicht ganz verstanden, da ein div entweder die ganze Breite einnimmt, oder eine definiert Breite hat.
 
mh, naja fast
mit width:100px lege ich ja die Fensterbreite fest, aber diese soll ja vom Inhalt abhängig sein
aber ich hab mal an deiner Idee weiter gebastel und dies hier ist dabei raus gekommen

Code: 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Div-Container</title>

<div style="left:300px; top:200; position: absolute">
<div style="position: absolute; bottom: 0px; right: 0px; background-color: blue">
Ausbreitung nach oben und nach links
</div>
</div>

<div style="left:300px; top:200; position: absolute">
<div style="position: absolute; bottom: 0px; left: 0px; background-color: red">
Ausbreitung nach oben und nach rechts
</div>
</div>

<div style="left:300px; top:200; position: absolute">
<div style="position: absolute; top: 0px; left: 0px; background-color: green">
Ausbreitung nach unten und nach rechts
</div>
</div>

<div style="left:300px; top:200; position: absolute">
<div style="position: absolute; top: 0px; right: 0px; background-color: yellow">
Ausbreitung nach unten und nach links
</div>
</div>

</body>
</html>

Was hier jetzt perfekt funktioniert ist die Positionierung der Container. In allen 4 Beispielen befindet sich der Container an der selben Stelle nur die Ausbreitung findet in verschiedene Richtungen statt.

ABER: Da im zweiten Div ein position:absolute steht, wird der Text nicht zusammen hängend in einer Zeile dargestellt, sondern wird zusammen gestaucht. Mit position:relative würde dies ja nicht passieren, aber dann wäre die Ausbreitung wieder nicht korreket. :( Tja, da häng ich grad fest
 
ah, das hab ich grad gefunden

white-space:nowrap;

Code: 
<div style="left:300px; top:200; position: absolute">
<div style="position: absolute; white-space:nowrap; bottom: 0px; left: 0px; background-color: red">
Ausbreitung nach oben und nach rechts<br>noch mehr Text
</div>
</div>

das sieht doch gut aus, mal schauen wie weit ich damit komme
 
das klappt alles irgendwie nicht

Das float:right scheint hier überhaupt nicht angewandt zu werden. Die beiden Container werden nicht neben einander positioniert, das verstehe ich nicht. Hat jemand eine Idee was ich noch probieren könnte?

Code: 
<div style="white-space:nowrap; left:300px; top:200; position: absolute">
<div style="position: absolute; bottom: 0px; left: 0px; background-color: red">
  <div style="float:right; position: relative">
  1. Container
  </div>
   <div style="float:right; position: relative">
  2. Container
  </div
</div>
</div>
 
Durch das position: absolute hat das äußerste DIV immer die Breite des Inhaltes (außer du gibst ihm ein width) - und das float sagt ja nur, wie es "fließen" soll; aber wenn zu wenig Platz da ist dann wird natürlich umgebrochen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben