Markus Emde: [CSS] Text links, rechts, oben, unten

Hallo zusammen,

ich versuche jetzt schon lange vergeblich, selbst auf die Lösung zu kommen. Was ich möchte ist folgendes :

Zwei DIV's nebeneinander, im linken soll der Text links unten, im rechten rechts oben stehen.

Folgenden Code gibt es als Vorgabe :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.divleft {
 width: 200px;
 float: left;
 line-height: 200px;
 vertical-align: bottom;
 text-align: left;
}

.divright {
 width: 200px;
 float: right;
 vertical-align: top;
 line-height: 200px;
 text-align: right;
}

.divmain {
 width: 400px;
}
-->
</style>
</head>

<body>
<div class="divmain">
 <div class="divleft">
  hallo1
 </div>
 <div class="divright">
  hallo2
 </div>
</div>

</body>
</html>

Was ist falsch ? Wo ist der Denkfehler ?

Danke,
Markus

  1. Hi,

    Wo ist der Denkfehler ?

    Der Denkfehler ist, vertical-align haben bei einem Block-Element wie Div die gewuenschte Auswirkung - hat es nach Definition aber nicht.

    Du koenntest per display aus dem Div ein Tabellenelement machen - kann der IE aber AFAIK auch in Version 7 noch nicht.
    line-height kann bei einzeiligen Texten helfen - das crasht aber wirklich unschoen, wenn der Text doch mal mehrzeilig wird. Ein padding-top ist in dem Fall nicht ganz so schlimm.
    Ansonsten bleibt noch absolut-relative Positionierung.

    MfG ChrisB