Das dritte Element macht mich fertig

[Cyperfriend]

Ich habe eine Headerbox und darin mehrere andere Boxen. Erstmal ein Bild:
Anhang anzeigen 26026
Die ersten beiden Boxen (links und mitte) sind richtig, aber die Box die rechts sein soll will sich einfach nicht unten anordnen. Ich kann machen was ich will. Eigentlich hätte ich erwartet, dass ein float:right hilft, aber das wird einfach ignoriert.
Hier mal der HTML-Code:
[src=html5]
<!-- Anfang Header -->
<div id="header">
<!-- Anfang Serverzeit -->
<div id="servertime">
Serverzeit: <?php echo date("H:i:s"); ?> Uhr
</div>
<!-- Ende Serverzeit -->

<!-- Anfang Box -->
<div id="box">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</div>
<!-- Ende Box -->

<!-- Anfang Benutzername -->
<div id="loggedin">
Angemeldet als: Max Mustermann
</div>
<!-- Ende Benutzername -->

</div>
<!-- Ende Header -->
[/src]

[src=css]
#header {
/* Blau */
background-color:#09F;
height:100px;
position:relative;
}

#servertime {
/* Gelb */
background-color:#CF3;
position:absolute;
bottom:0;
float:left;
margin-bottom:5px;
margin-left:5px;
opacity:0.8;
border:1px solid #000;
padding-left:5px;
width:140px;
}

#box {
/* Gelb */
background-color:#CF3;
position:absolute;
bottom:0;
width:424px;
left:50%;
margin-left:-212px;
margin-bottom:5px;
opacity:0.8;
}

#box ul {
list-style-type:none;
}

#box li {
float:left;
border:1px solid #000;
border-collapse:collapse;
margin-right:-1px;
padding-left:5px;
width:100px;
}

#loggedin {
/* Gelb */
background-color:#CF3;
margin-right:5px;
float:right;
bottom:0;
opacity:0.8;
border:1px solid #000;
padding-left:5px;
}
[/src]

 

[epiphora]

[kw]#servertime[/kw] und die [kw]#box[/kw] sind jeweils absolut positioniert, [kw]#loggedin[/kw] jedoch nicht. Dadurch wird auch die Angabe [kw]bottom: 0[/kw] überhaupt nicht ausgewertet das geht nämlich nur bei statisch positionierten Elementen nicht.

 

[Cyperfriend]

Der Witz ist, dass wenn ich das bei #loggedin auch mache, dann landet diese Box unten links, obwohl ich ja rechts floate.

 

[Coca-Cola]

Du musst es absolut positionieren und dann rechts ausrichten.
(ohne den float)

[src=css]
position: absolute;
right: 5px;
bottom: 5px;
[/src]

 

[Cyperfriend]

Danke, funktioniert.

 

[theSplit]

Absolute ist aber auch absolut zum Bildschirm, willst du es Relativ zum Eltern Element haben, nimm "Relative" als CSS Positionierung und top 90%, und left %2, bei einer beschriebenen Höhe und Breite des Containers. Wichtig auch, setzt den Elterncontainer auf "position: relative" - das ist für Chrome oftmals beim Layouten wichtig.

In CSS3 gibt es auch das Keyword "postion: sticky" - aber das ist glaube ich bisher nur für Firefox Nutzer nutzbar, mag aber auch sein das es Chrome kann.

 

[LemonDrops]

position: absolute ist nicht zwangsläufig abhängig vom Bildschirm

 

[theSplit]

position: absolute ist nicht zwangsläufig abhängig vom Bildschirm

Stimmt, man sollte eher sagen absolut zum Elternelement. Aber recht hast du, das hab ich voller Überschwenglichkeit gar nicht erwähnt

 

[Krutius]

@theSplit

Das stimmt so auch noch nicht. Es ist in der Regel das erste Elternelement das eine von `static` abweichende `position` Eigenschaft hat.

Siehe W3C:

http://www.w3.org/TR/CSS2/visuren.html 9.3.1

absolute
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

und entsprechend der `containing block`:

http://www.w3.org/TR/CSS2/visudet.html 10.1 Definition of "containing block"

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
Otherwise, the containing block is formed by the padding edge of the ancestor.
If there is no such ancestor, the containing block is the initial containing block.