vertical-align:bottom will nicht

[Kalle_B]

Hallöle,

meine Flyer mache ich (für mich) selbstverständlich mit HTML.

Wenn man ein A4-Blatt drittelt, ergibt sich rechts

#rechts {
  position:     absolute;
  left:         203mm;
  width:        90mm;
  top:          0;
  height:       200mm;
  padding:      0.2em;
  border: 1px solid #f00;
  vertical-align: bottom;
}

Aber der Text wird nicht wie gewünscht unten angeordnet.

Auf <table> möchte ich gerne verzichten. Wie geht es?

Lieben Gruß, Kalle

[Michael]

Aber der Text wird nicht wie gewünscht unten angeordnet.

Auf <table> möchte ich gerne verzichten. Wie geht es?

Genau damit habe ich mich auch schon stunden lang herumgeschlagen und folgendes festgestellt:
das Attribut vertical-align bezieht sich nicht auf die Angebe von height, sondern auf eine Textzeile. Wenn du nur eine Zeile hast, definiere statt height: 200mm einfach line-height: 200mm, dann funktionierts. Für mehrzeiligen Text habe ich bisher nur eine Lösung mit <table> gefunden.
Gruß Michael.

[Kalle_B]

das Attribut vertical-align bezieht sich ... auf eine Textzeile. Wenn du nur eine Zeile hast, definiere statt height: 200mm einfach line-height: 200mm, dann funktionierts.

Nein, die Zeile mit der Höhe von 200mm klebt am oberen Rand. Das Attribut vertical-align:bottom wird ignoriert.

Kalle

[Snafu]

Probiers mal so (keine Garantie):
CSS

  
#rechts  
{  
    ...  
    ...  
    position:relative;  
}  
#rechts p  
{  
    position:absolute;  
    bottom:0px;  
    right:0px; /* bzw left je nachdem was du willst */  
    ...  
    ...  
}  

HTML

  
...  
<div id="rechts">  
    <p>  
        Warum bin ich so fröhlich, so fröhlich, so fröhlich, ...  
    </p>  
</div>  
...  

[Snafu]

Da 0 (in Worten Null) keine Einheit hat meine ich bei der absoluten Positionierung natürlich:
CSS

  
...  
#rechts p  
{  
    position:absolute;  
    bottom:0;  
    right:0; /* bzw left je nachdem was du willst */  
    ...  
}  
...  

[Bobby]

Moin

"vertical-align" ist nur bei Tabellen-zellen und inline-Elementen anwendbar. Wie hier unter Punkt "Applies to:" nachzulesen ist.

Gruß Bobby