div im div nach unten ausrichten

[Wurzel]

da heute layer-sonntag ist, will ich auch nicht mit eine frage hinterm berg halten folgender code

<div style="margin: auto; border: 1px solid black; float:left; width: 200px; height: 200px; padding:5px;">
   <h2 style="float:left;">{{artikel}}</h2>
   <div style="text-align:right;">
	<img src="bilder/{{farbe}}.gif" width="30" height="15" align="texttop" alt="{{artikel}}">
   </div>
   <div style="margin-top:10px;clear:left;">
	{{inhalt}}<br>
        {{serie}} 
   </div>
   <div style="text-align:right">
	{{aktionspreis}}&nbsp;&euro;
   </div>
   <div style="position:relative;bottom:10px;">
	<a href="{{link}}">zum Artikel</a>
   </div>
</div>

das letzte div soll immer am fuss des eltern-divs stehen ...
- position:absolute + bottom orientiert es am browserfenster
- position:relative + bottom ^^ orientiert es garnicht
- margin-top: 100% orientiert es am fuss des elternlayers, treibt diesen aber in der höhe auf => will ich nicht

jemand einen tipp?

[mrhappiness]

kannst du nicht den letzten div rausschmeißen und den text im übergeordneten div ausrichten mit vertical-align?

[Wurzel]

so?

<div style="margin: auto; border: 1px solid black; float:left; 
          width: 200px; height: 200px; padding:5px;[b] vertical-align:bottom;[/b]">
   <h2 style="float:left;">{{artikel}}</h2>
   <div style="text-align:right;">
	<img src="bilder/{{farbe}}.gif" width="30" height="15" align="texttop" alt="{{artikel}}">
   </div>
   <div style="margin-top:10px;clear:left;">
	{{inhalt}}<br>
        {{serie}} 
   </div>
   <div style="text-align:right">
	{{aktionspreis}}&nbsp;&euro;
   </div>
	zum Artikel
</div>

tut nicht => ie6 / firebird 0.7

[mrhappiness]

ich nehme alles zurück und behaupte das gegenteil

vertical-align geht wohl bei td, aber nicht bei div

[Wurzel]

daher (nur) das tabellen-beispiel im selfhtml ... wenn nicht noch jemand
(wahsaga?) eine bessere idee hat, nehm ich nen zusätzlichen div mit einer
festen höhe und verdränge den link nach unten ... nicht schön, aber selten

[derHund]

hmm,

wollte grad schreiben, hattest du wohl grad vorgeschlagen ...

  <div style="margin: auto; border: 1px solid black; float:left; width: 200px; height: 200px; padding:5px;">
    <div style="height:180px;">
      <h2 style="float:left;">{{artikel}}</h2>
      <div style="text-align:right;">
        <img src="bilder/{{farbe}}.gif" width="30" height="15" align="texttop" alt="{{artikel}}">
      </div>
      <div style="margin-top:10px;clear:left;">
  	  {{inhalt}}<br>
      {{serie}}
      </div>
      <div style="text-align:right">
	   {{aktionspreis}} €
      </div>
    </div>
    <div>
	    <a href="{{link}}">zum Artikel</a>
    </div>
  </div>

... weiß aber nicht, wies nachm parsen aussieht ...

[Wurzel]

jepp ... so meinte ich das

[wahsaga]

Re: div im div nach unten ausrichten

Original geschrieben von Wurzel
- position:absolute + bottom orientiert es am browserfenster

position:absolute orientiert sich immer an dem elternelement, welches bei position nicht den default-wert static hat. nur wenn es kein solches gibt, orientiert es sich am viewport.

versuche also mal, dem umgebenden div noch ein position:relative zu verpassen.

[Wurzel]

@wahsaga
klappt perfekt ... danke.

[jfuerwentsches]

Hallo zusammen!

Auch wenn das Topic hier ziemlich alt ist, muss ich es nochmal hervorkramen... Es bezieht sich exakt auf mein Problem. Und zwar wollte ich wissen, ob jemand eine Möglichkeit kennt ein Layer am unteren Rand des Elternelements auszurichten, wenn das Elternelement keine feste Höhe hat?

Grüße,
Johannes

[wahsaga]

Original geschrieben von jfuerwentsches
Und zwar wollte ich wissen, ob jemand eine Möglichkeit kennt ein Layer am unteren Rand des Elternelements auszurichten, wenn das Elternelement keine feste Höhe hat?

Und, was veranlasst dich zu glauben, dass die Lösung nicht ebenfalls fast die gleiche wäre?

Du solltest dann nur dafür sorgen, dass das äußere Element eine Mindesthöhe einhält.