height wird übernommen

[tropenberta]

hi leuts

hab mal wieder ne anfängerfrage:

  
<div id="box1">  
  <div id="box2">  
  </div>  
</div>  

  
#box1 {  
position:fixed;  
bottom:24px;  
left:0;  
background:rgba(1,162,78,0.6);  
width:100%;  
height:81px;		  
}  

wenn ich jetzt die box2 border, hat sie auch 100% width. nimm ich bei box1
die width weg, ist box2 wieder so breit wie der inhalt.
irgendwie wird von der box2 die width von box1 übernommen. ist das normal ?
möchte eigentlich nur nen footer machen, indem die box2 immer mittig, egal wieviel content in der box2 ist, steht.

lg
micha

[Gunnar Bittersmann]

@@tropenberta:

nuqneH

irgendwie wird von der box2 die width von box1 übernommen. ist das normal ?

Ja, absolut positionierte Elemente haben nur soviel Breite wie für ihren Inhalt nötig (shrink to fit).

möchte eigentlich nur nen footer machen,

Da sollten sich bessere Elemente für finden lassen als div-Suppe.

indem die box2 immer mittig, egal wieviel content in der box2 ist, steht.

display: inline-block für die innere Box, text-align: center für die äußere.

Qapla'

[tropenberta]

hi leuts

vielen dank für die rasche antwort.
jetzt habs ich gerafft - vielen dank.

funzt auch alles so wie ich will.

lg
micha

[Steel]

Moin!

Da box2 ein Div ist, hat sie immer 100% der Breite des Elternelements. Ausser Du änderst das irgendwie, z.B. in dem Du sie aus dem Elementfluss nimmst. (was man mit float oder eben auch position erreichen kann)

Das heisst: Dein Element box1 ist durch position:fixed nur so gross wie sein Inhalt. Da gibts also nix zu zentrieren. Machst Dus größer, nimmt auch box2 die normale Breite von 100% ein.

Sorge also dafür, daß box2 das nicht tut (ebenfalls mit position - z.b. absolut, oder mit einer width Angabe, ...) oder nimm ein anderes (für den Inhalt geeigneteres) Element.

Einfach mal ne HTML/CSS Doku lesen. ;)