[HTML/CSS] Überlappender Container

[Benedikt R.]

Hallo!

Ich habe Problem beim Umsetzen eines Webdesigns. Im Anhang
ist die Situation mal als Grafik dargestellt.

Es geht um den DIV-Container "Navigation 1". Dieser soll seinen
übergeordneten DIV-Container mit circa 100 Pixel nach links über-
lappen. Ich habe das im Moment mit folgendem Code gelöst
(der Code richtet sich nach den Namen im Layout):

#Navigations-Container {
	float: left;
	width: 900px;
	margin: 80px 0px 0px;
	overflow: visible;
}

#Navigation-1 {
	width: 800px;
	height: 12px;
	float: left;
	font-size: 12px;
	text-align: right;
	vertical-align: top;
	overflow: hidden;
	position: relative;
	left: -100px;
}

#Navigation-2 {
	float: left;
	width: 95px;
	font-size: 12px;
	position: relative;
	left: -100px;
}

Das funktioniert auch soweit. Jetzt möchte ich aber noch die Ele-
mente innerhalb von Navigation-1 rechtsbündig ausrichten
(s. Anlage), was sich mit text-align aber anscheinend nicht
tun lässt. Folgende Objekte befinden sich in "Navigation-1":

<div id="siteGalleries">
	<a href="#"><img src="images/galleries/sunnyday/linkSunnyday.gif" alt="sunnyday" /></a>
        <a href="#"><img src="images/galleries/ice-age/linkIce-Age.gif" alt="ice-age" /></a>
        <a href="#"><img src="images/galleries/steps/linkSteps.gif" alt="steps" /></a>
</div>

Kann mir jemand helfen, die Elemente rechtsbündig auszurichten?


Danke,
Benedikt

[Benedikt R.]

Problem gelöst

Ich habe das Problem gelöst, indem ich die Hyperlinks in einen weiteren Container gepackt habe (DIV-Element) und die display-Eigenschaft dieses auf inline-block gestellt.

Ein Beispiel dafür ist im Anhang.


Grüße,
Benedikt