✔ geschachtelte <div>s: inneres Div rutscht aus äusserem Div raus

Status
Nicht offen für weitere Antworten.
M

midnight3009

Grünschnabel
Hi,
ich habe folgendes CSS Problem:

Ich habe 2 geschachtelte static Divs.

Diese sind Static weil die Software n dieser Divs als Ergebnisliste liefert, die sollen untereinander. Darin sind 2 weitere statische Divs, die Grösse des Inhalts variiert.

Das Problem: inneres Div rutscht aus äusserem Div raus, wenn der Text mehr wird.

Zu bewundern hier:
http://www.traveltotal.de/position2.htm

Danke für Eure Hilfe

Micha

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>position</title>

<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }


/* margin(aussen) und padding(innen) sind sehr wichtig, dass der inhalt nicht rausflutscht
dann kann man sicht width height sparen*/
#s1 {width:350px;  position:relative; padding:30px; margin:20px}
#s2 {width:350px;  position:relative; top:5px; left:-5px; padding:30px; margin:20px }



#a3 { position:absolute; top:320px; left:600px; width:250px; height:250px; z-index:3; background-color:#ffa; }


#a4 { position:absolute; top:20px; left:20px;width:150px; padding:5px; margin:5px; z-index:1; background-color:#ff5; }
#a5 { position:absolute; top:20px; right:20px; width:70px; height:70px;padding:5px; margin:5px; z-index:2; background-color:#dd2; }

#abs { position:absolute; top:50px; left:100px; width:450px; height:450px; z-index:3; background-color:#faf; }


#a7 {float:left; width:70px; height:70px; padding:5px; margin:5px;  z-index:1; background-color:#ff5; }
#a8 { float:right; padding:5px; margin:5px;  z-index:2; background-color:#dd2; margin:20px }
p {margin:5}

</style></head><body>


<div id="abs">absolute relativ absolut is ok
	<div id="s1">s1 static with margin<br>
	wenn ich nur Text im div habe, dehnt sich das Div mit zunehmenden Text,
	Textabstand ist entsprechend padding
	
	</div>

	<div id="s1">  in s1 text and further divs
		<div id="a4"> 
		a4: inner div hat korrekte Position, aber 
		wenn der Text mehr wird, dehnt
		sich nur das inner div aus und 
		rutscht aus dem &auml;usserem div raus.
		Warum dehnt sich das nicht mit?
		</div>
  		<div id="a5">
  		a5:  
		</div>
	</div>

	<div id="s2">s2 ohne margin relativ -5
  		<div id="a7">a7 right absolut in static</div>
  		<div id="a8">a8 right absolut in static </div>
	</div>
</div>

<!-- ab hier kein Problem -->
<div id="a3">a3 absolute 
  <div id="a4">a4 absolute</div>
  <div id="a5">a5 absolute</div>
</div>

</body></html>
 
Zuletzt bearbeitet:
Hi,

das sind die Gesetzmäßigkeiten bei absolut positionierten Elementen mit fixer Höhenangabe, dass sie bei zunehmenden Inhalt nicht "mitwachsen".

Außerdem werden sie durch diese Positionierung aus dem normalen Textfluss genommen, was zur Folge hat, dass zwischen den beiden Boxen #abs und #a4 kein "Verhältnis" mehr besteht.
 
Maik hat gesagt.:
Hi,
was zur Folge hat, dass zwischen den Boxen #abs und #a4 kein "Verhältnis" mehr besteht.
Zum Vergrößern anklicken....

Das kanns nicht sein, selbst, wenn ich das absolute abs aussen rum entferne, habe ich das gleiche Problem. Ich glaube was Du schilderst, ist nur der Fall, wenn der direkte Vorfahre absulut ist.
 
Zuletzt bearbeitet:
Wenn du es mir nicht glaubst, dann mach mal hiermit die Gegenprobe:

Code: 
#a4 {  margin-top:20px; margin-left:20px;width:150px; padding:5px; margin:5px; z-index:1; background-color:#ff5; }

#abs { position:relative; top:50px; left:100px; width:450px; min-height:450px; height:auto !important; height:450px; z-index:3; background-color:#faf; }
 
Ok, Du hast das absoltute nicht nur aus den abs sondern auch aus den a4 rausgenommen.

Das müsste ich aber dann auch mit dem a5 machen, da dies auch dehnbar sein soll. Und dann sind nicht mehr beiden nebeneinander.

#a4 { margin-top:20px; margin-left:20px;width:150px; padding:5px; margin:5px; z-index:1; background-color:#ff5; }
#a5 { margin-top:20px; margin-right:20px;width:150px; padding:5px; margin:5px; z-index:1; background-color:#ff5; }
 
Ich will aber nicht, das das ein vom anderen umflossen wird
nicht

aab
aab
bbb


und nicht

abb
abb
aaa

sondern

---- ----
aa | b |
aa |b |
--- |b |
---------

..wie zwei table spalten

a4 float:left;
a5 float:right

geht auch nicht


ich glaube langsam, dass ich da noch nicht ohne table auskomme und
divs vergessen kann.
 
Zuletzt bearbeitet:
Vermutlich hast du dir einfach mit dem grundsätzlichen SELFHTML-Beispiel zu den einzelnen Positionsarten die falsche Vorlage für dein Vorhaben ausgesucht.

Du musst halt selbst abwägen, welche Technik dich letzlich weiterbringt. Doch das Argument "Ich will aber nicht, das das ein vom anderen umflossen wird" lass ich nicht gelten, denn erstens wird dich diese Methode einen bedeutenden Schritt weiterbringen, als an der absoluten Positionierung der Elemente festzuhalten, und zweitens hast du doch die beiden DIVs #a7 und #a8 auch mit der float-Eigenschaft ausgezeichnet. Wo ist also das Problem?
 
Ich seh schon, du musst noch viel lernen :)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>position</title>

<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }


/* margin(aussen) und padding(innen) sind sehr wichtig, dass der inhalt nicht rausflutscht
dann kann man sicht width height sparen*/
.s1 {width:350px;  position:relative; padding:30px; margin:20px}
#s2 {width:350px;  position:relative; top:5px; left:-5px; padding:30px; margin:20px }

#a3 { position:absolute; top:320px; left:600px; width:250px; height:250px; z-index:3; background-color:#ffa; }

#a4 { float:left; display:inline; margin-top:20px; margin-left:20px;width:150px; padding:5px; margin:5px; background-color:#ff5; }
#a5 { float:right; display:inline; margin-top:20px; margin-right:20px; width:70px; min-height:70px; height:auto !important; height:70px; padding:5px; margin:5px;  background-color:#dd2; }

#abs { position:relative; top:50px; left:100px; width:450px; min-height:450px; height:auto !important; height:450px; z-index:3; background-color:#faf; }

#a7 {float:left; display:inline; width:70px; min-height:70px; height:auto !important; height:70px; padding:5px; margin:5px;  background-color:#ff5; }
#a8 { float:right; display:inline; padding:5px; margin:5px;  background-color:#dd2; margin:20px }
p {margin:5px}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
</head>
<body>

<div id="abs">absolute relativ absolut is ok
        <div class="s1">s1 static with margin<br>
        wenn ich nur Text im div habe, dehnt sich das Div mit zunehmenden Text,
        Textabstand ist entsprechend padding
        </div>

        <div class="s1 clearfix">  in s1 text and further divs
                <div id="a4">
                a4: inner div hat korrekte Position, und
                wenn der Text mehr wird, dehnen sich alle
                Boxen in der Vertikalen aus
                </div>
                  <div id="a5">
                  a5: inner div hat korrekte Position, und
                wenn der Text mehr wird, dehnen sich alle
                Boxen in der Vertikalen aus
                </div>
        </div>

        <div id="s2" class="clearfix">s2 ohne margin relativ -5
                  <div id="a7">a7 right absolut in static</div>
                  <div id="a8">a8 right absolut in static </div>
        </div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück