codefritz: box in box positionieren

SELF-Forum

box in box positionieren

codefritz
– Informationen zu den Bewertungsregeln

Die Box mytest soll in der Box header positioniert werden.

die höhe von mytest ergibt sich durch den darin angezeigten inhalt.
mytest soll ausserdem hor zentriert verden und 100 px breit sein.
ausserdem soll sie an der unterseite (bottom) von header ausgerichtet werden.

klaptt einfach nicht.
hab schon mit margin und absolute positionierung versucht.

danke fuer die hilfe

  
div.header {width:1080px; height:378px; border: solid 2px yellow;}  
div.mytest { background-color:green; width:100px; border:1px dotted red;  margin-bottom:0px;}  


  
<div class="header">  
    <div class="mytest">bla</div>  
</div>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Box in Box positionieren

    sho
    – Informationen zu den Bewertungsregeln

    Die Box mytest soll in der Box header positioniert werden.

    Dafür das äußere DIV als position:relative definieren, dann richtet sich das innere nach ihm aus. Das innere bekommt position:absolute - damit kannst Du ihm bottom:0px (0px Abstand vom unteren Rand des äußeren DIV) und left:50% (die Mitte des äußeren DIVs) geben.

      
<html>  
<head>  
<style type="text/css">  
<!--  
div.header{  
	position:relative;  
	width:1080px;  
	height:378px;  
	background:#c3c3c3;  
}  
div.mytest {  
	position:absolute;  
	bottom:0px;  
	width:100px;  
	left:50%;  
	background:#000000;  
	color:#FFFFFF;  
}  
-->  
</style>  
</head>  
<body>  
<div class="header">  
    <div class="mytest">  
   	 <p>Text  Text  Text  Text  Text  Text  Text  Text  
   	  Text  Text  Text  Text  Text  Text  Text  Text  
   	   Text  Text  Text  Text  Text  Text  Text  Text  
   	  </p>  
    </div>  
</div>  
</body>  
</html>

    es grüßt:s.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Box in Box positionieren

      codefritz
      – Informationen zu den Bewertungsregeln

      Dafür das äußere DIV als position:relative definieren, dann richtet sich »» das innere nach ihm aus. Das innere bekommt position:absolute - damit
      kannst Du ihm bottom:0px (0px Abstand vom unteren Rand des äußeren DIV)
      und left:50% (die Mitte des äußeren DIVs) geben.

      Dank erstmal werd ich gleich testen.
      Hab es so ähnlich schonmal versucht, eben die aeussere box als position:relative, die innere absolute mit bottom:0px.
      Hatte dann allerdings die hor. Zentrierung mit margin (auto) der inneren Box versucht. D.h. eine Kombination aus absolute und margin ist nicht moeglich?

      Danke,
      codefritz

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Box in Box positionieren

      Codefritz
      – Informationen zu den Bewertungsregeln

      Die Box mytest soll in der Box header positioniert werden.

      Dafür das äußere DIV als position:relative definieren, dann richtet sich »» das innere nach ihm aus. Das innere bekommt position:absolute - damit »» kannst Du ihm bottom:0px (0px Abstand vom unteren Rand des äußeren DIV) und »» left:50% (die Mitte des äußeren DIVs) geben.

      Funktioniert leider nicht.
      Zwar wird die innere Box entsprechend an der Unterseite ausgerichtet, aber sie wird nicht zentriert. Stattdessen ganz nach rechts gesetzt!?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln