Innerhalb einer Ebene unten positionieren?

[folio]

Hi,

habe auf meiner Seite vereinfacht folgende Struktur:

<div style="width:100px; background-color:#ffcc00;height:400px;float:right;">
	<div style="positon:relative;bottom:0;width:89px;background-color:#fff;">hehe</div>
</div>

Jo, also die Ebene wo "hehe" drin steht soll am unteren Rand von der Containerebene sein! Wie stell ich das am besten an? So klappts nicht..

Würde mich sehr über Hilfe freuen!
gruß folio

 

[Maik]

Das Elternelement muß hierfür relativ, und das Kindelement darin absolut positioniert werden:

<div style="position:relative; width:100px; background-color:#ffcc00;height:400px;float:right;">
     <div style="position:absolute;bottom:0;width:89px;background-color:#fff;">hehe</div>
</div>

Das Thema wird ins CSS-Board verschoben.

 

[folio]

Hm, und wenn das Elternelement wegen der restlichen Seite per float positioniert werden muss, geht es dann auch?

 

[Maik]

Hast du den Quellcode schon getestet?

Ansonsten verstehe ich jetzt deine Rückfrage nicht.

 

[folio]

Ok, es funktioniert so weit. Jetzt ist im Elternelement relativ viel Content drin. Das Kindelement ist zwar unten positioniert, überdeckt aber da wo es ist den Inhalt vom elternelement. Ich kann aber keine feste höhe für das Elternelement angeben, weil der Inhalt immer unterschiedlich lang ist. Verstehst du?

 

[Maik]

Bei mir wird der Inhalt nicht von dem Kindelement überdeckt:

<div style="position:relative;width:100px;background-color:#ffcc00;float:right;">
     <p>content 1</p>
     <p>content 2</p>
     <p>content 3</p>
     <p>content 4</p>
     <p>content 5</p>
     <p>content 6</p>
     <p>content 7</p>
     <p>content 8</p>
     <p>content 9</p>
     <p>content 10</p>
     <p>content 11</p>
     <p>content 12</p>
     <p>content 13</p>
     <p>content 14</p>
     <p>content 15</p>
     <div style="position:absolute;bottom:0;width:89px;background-color:#fff;">hehe</div>
</div>

Alternativ hierzu könntest du in diesem Fall auch auf die absolute Positionierung des Kindelements verzichten, da sich seine Position ja durch den Inhalt automatisch ergibt.

 

[folio]

Hi,

ok danke erstmal, es funktioniert soweit.
Hier mal ein Beispiel:
http://www.videotutorials.org/marcin/test.html

Die rechte Ebene (mit dem orangen hintergrund) soll bis dahin gehen, wo der schwarze Strich ist. Das heißt die vier kleinen Bilder sollen bündig mit dem schwarzen Strich sein. Wenn in der Box rechts genug Inhalt ist, geht es auch so. Aber das ist nicht immer der Fall. Wie mache ich das?

 

[Maik]

In diesem Fall müßtest du für das rechte Parent-DIV eine Höhe bestimmen, die der linken Grafik entspricht.

 

[folio]

Hm, anders gehts nicht?
Denn die Höhe der linken Grafik ist ja immer anders...das wäre dann wieder programmieraufwand!

 

[Maik]

Grundsätzlich gibt es noch die Möglichkeit, das "Footer"-DIV mittels einem negativen margin-top-Wert nach oben zu schieben. Voraussetzung hierfür ist aber, daß das Element eine bekannte Höhe besitzt.

div#top {
border-bottom: 1px solid #000;
}

div#top img {
display: block;
}

div#footer {
float: right;
height: 50px;
margin-top: -51px;
width: 250px;
background: #dfdfdf;
}

<div id="top">
    <img src="" alt="">
</div>
<div id="footer">footer</div>