rechts ausrichten

[Pete]

Hallo,

wie schaffe ich es, zwei divs wie mit Tabellen auszurichten:

--------------------------------------------------
|                                         |                                               |
|                                         |                                               |
|                                         |                                               |
| linksausgerichtet              |                rechtssausgerichtet |
|                                         |                                               |
|                                         |                                               |
|                                         |                                               |
--------------------------------------------------

Ich habe folgendes versucht:

<div class="programHeadlineSpan">
<div class="programHeadDiv">
<span class="programHeadline">Programm</span><span class="programSubtitle">V1.0b</span>
</div>
<div class="programSubNavDiv">
<a class="programSubnav" href="" onClick="pgrAction('about')" onFocus="this.blur()">About</a>&nbsp;&nbsp;
<a class="programSubnav" href="" onClick="pgrAction('impressum')" onFocus="this.blur()">Impressum</a>
</div>
</div>

Und als css:

.programHeadDiv { padding-top:2px; padding-bottom:2px; padding-left:0px; padding-right:0px;}
.subnav2Div { position:absolute; top:30px; width:100%; height:15px; background-color:#947f62; padding-top:2px; padding-bottom:2px; padding-left:0px; padding-right:0px;}
.subnavDiv { position:absolute; top:50px; width:100%;  padding-top:4px; padding-bottom:2px; padding-left:0px; padding-right:0px;}
.programSubNavDiv { text-align:right; padding-top:2px; padding-bottom:2px; padding-left:0px; padding-right:0px;}
.programHeadlineSpan { position:absolute; top:5px; padding-top:2px; padding-bottom:2px; padding-left:0px; padding-right:0px;}

.programHeadline { font-size:18px; font-weight:bold; padding:0px; margin:0px;}
.programSubtitle { font-size:10px; font-weight:normal; padding:0px; margin:0px;}
.programSubnav { text-align:right; padding:0px; margin:0px;}

Ich bekomme vor allem den rechten Text nicht am rechten Bilschirmfenster ausgerichtet. Mit Tabellen wäre das jetzt einfach:

<table>
<tr><td>linker text</td><td align="right">rechter Text</td></tr>
</table>

Kann mir jemand helfen?

Pete

[ichen]

Moin!
lese:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float
tschüss ichen

[Struppi]

<div class="programHeadlineSpan">
<div class="programHeadDiv">
<span class="programHeadline">Programm</span><span class="programSubtitle">V1.0b</span>
</div>
<div class="programSubNavDiv">
<a class="programSubnav" href="" onClick="pgrAction('about')" onFocus="this.blur()">About</a>&nbsp;&nbsp;
<a class="programSubnav" href="" onClick="pgrAction('impressum')" onFocus="this.blur()">Impressum</a>

Du weißt, das das Impressum auch ohne JS zugänglich sein muss (wenn es sich um gewerbliche Seiten handelt).
http://www.webmaster-resource.de/tricks/design/impressum.php

Auch der Rest deines Codes ist mir nicht klar, warum soviele DIVs?
Was sollen die spans? Für "Headline" und "subtitle" gibt es schöne HMTL Elemente: h1 - h6

Alles in allem ist dein CSS wesentlich umfangreicher (und damit komplizierter) als notwendig.

Tendenziell würd ich es eher so machen:

<div id="links" >
<h1>Programm <small>V1.0b</small></h1>

</div>

<div id="rechts" >

<ul>
<li><a ...>About</a></li>
<li><a ...>Impressum</a></li>
</ul>

</div>
(Wie man Linklisten gestalten kann http://css.maxdesign.com.au/index.htm)

CSS :
#links{
float:left;
width:50%;
margin:0;
padding:0;
}
#links h1
{
font-size:18px; font-weight:bold;
}
#links h1 small
{
font-size:10px; font-weight:normal;
}

#rechts
{
text-align:left;
}

#rechts ul
{
list-style-type:none;
margin:0;
padding:0;

}
#rechts li
{
display:inline;
}

Struppi.