Otto der Planlose
Neues Mitglied
Hallo zusammen,
ich versuche eine "Text-Gruppe" so darzustellen, dass auf der linken Seite 2-3 (unterschiedliche) Zeilen stehen, und auf der rechten Seite nur eine Zeile. Nach Möglichkeit sollte diese vertikal mittig sein. :)
Leider habe meine Bücher zu dem Thema vor einigen Jahren verliehen und nicht wieder bekommen, und im Netz steht nicht das was ich suche.
Anbei mal das vereinfachte Beispiel:
auf der rechten Seite brauche ich das Feld mit einer bestimmten Breite. Ob ich das nun vor, oder hinter dem linken DIV-Container packe, ist mit mittlerweile egal. (Float links/rechts)
Allerdings ist der rechte Bereich nur eine Zeile hoch und ordnet sich damit genauso vertikal an, wie die erste Zeile links.
Wie bekomme ich das verfluchte Teil vertikal mittig??
ich versuche eine "Text-Gruppe" so darzustellen, dass auf der linken Seite 2-3 (unterschiedliche) Zeilen stehen, und auf der rechten Seite nur eine Zeile. Nach Möglichkeit sollte diese vertikal mittig sein. :)
Leider habe meine Bücher zu dem Thema vor einigen Jahren verliehen und nicht wieder bekommen, und im Netz steht nicht das was ich suche.
Anbei mal das vereinfachte Beispiel:
auf der rechten Seite brauche ich das Feld mit einer bestimmten Breite. Ob ich das nun vor, oder hinter dem linken DIV-Container packe, ist mit mittlerweile egal. (Float links/rechts)
Allerdings ist der rechte Bereich nur eine Zeile hoch und ordnet sich damit genauso vertikal an, wie die erste Zeile links.
Wie bekomme ich das verfluchte Teil vertikal mittig??
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Müller">
<meta name="editor" content="html-editor phase 5">
<style type="text/css">
.gruppe {
background-color: #0c0908;
border: 0px;
vertical-align:center;
border-radius: 25px 100px 100px 25px;
padding: 5px;
margin-bottom: 10px;
overflow: hidden;
}
.links {
/* float: left;
width: 75%;*/
}
.links div#name {
color: #FFFFFF;
font-size: 1.2em;
text-align: left;
}
.links div#details {
color: #FFFFFF;
font-size: 1em;
text-align: left;
}
.rechts {
/* width: 25%;*/
float: right;
vertical-align: middle;
color: #FFFFFF;
font-size: 1.2em;
white-space: nowrap;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div class="gruppe">
<div class="rechts">kein Umbruch</div>
<div class="links">
<div id="name">Das Beispiel</div>
<div id="details">mit dem Text da drunter</div>
</div>
</div>
<div class="clear"> </div>
</body>
</html>
