Tian Kruse: vertical-align:bottom reagiert nicht

SELF-Forum

vertical-align:bottom reagiert nicht

Tian Kruse
– Informationen zu den Bewertungsregeln

Hallo,

ich versuche gerade verzweifelt etwas Text in einem Div nach unten hin anzuordnen, aber es will einfach nicht klappen und ich seh den Fehler nicht.

Anbei mal kurz der Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>---</title>  
<style type="text/css" media="screen">  
body  
{  
	font-family:Lucida Grande, Lucida Sans Unicode, Arial, sans-serif;  
	font-size: 12px;  
	margin: 0;  
	padding: 0;  
	text-align: center;  
	color: #FFFFFF;  
	background-color: #EEEEEE;  
	background-image:url(gfx/bg.png);  
	background-repeat:repeat-x;  
	background-attachment:fixed;  
}  
  
#headContainer  
{  
	vertical-align:bottom;  
	margin: 1em auto;  
	margin-bottom: 0px;  
	width: 980px;  
	height: 84px;  
	text-align:center;  
	background-color: black;  
}  
  
#headLogo  
{  
	float: right;  
	background-image:url(gfx/logo.png);  
	background-repeat: no-repeat;  
	background-position: 0 0;  
	position: relative;  
	height: 55px;  
	width: 466px;  
}  
  
#headText  
{  
	float:left;  
}  
  
</style>  
</head>  
  
<body>  
	<div id="headContainer">  
   	<div id="headText">Hier steht Text</div>  
 	<div id="headLogo"></div>  
    </div>  
</body>  
</html>

Ich wäre euch sehr dankbar, wenn Ihr mir verraten könntet, warum das "vertical-align:bottom" für den headContainer nicht funktioniert. Der Text aus "headText" erscheint bei mir immer am oberen Rand des Browsers (FF3, Mac).

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. vertical-align:bottom reagiert nicht

    Harlequin
    – Informationen zu den Bewertungsregeln

    Yerf!

    Ich wäre euch sehr dankbar, wenn Ihr mir verraten könntet, warum das "vertical-align:bottom" für den headContainer nicht funktioniert.

    vertical-align wirkt nur bei Tabellenzellen oder Inline-Elementen. Ein DIV ist aber ein Block-Element.

    Wenn der Inhalt des Headers nur eine Zeile ist, dann könnte ein Setzen der line-height auf die Höhe des Headers eine Lösung sein.

    Gruß,

    Harlequin

    --
    <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln