Elemente rechtsbündig ausrichten mit variabler Grösse

[strukturart]

Hallo,

wie kann ich denn Elemente (H1) mit variabler Grösse rechtsbündig ausrichten.

So ist das Dokument aufgebaut:

<div id="wrapper">
	<div id="content">
		<h1></h1>
		<article>
		</article>
	</div>	
	
	<div id="content">
		<h1></h1>
		<article>
		</article>
	</div>
	
	
	<div id="content">
		<h1></h1>
		<article>
		</article>
	</div>
	
	
</div>

folgendes Styling auf dem H1 Element:

#content h1{
	color:white;
	background:black;
	display:inline-block;
	position:absolute;
	margin-top:-15px;
	padding:5px;
	margin-left:400px;

}

 

[SpiceLab]

Grundsätzlich steht für die horizontale Ausrichtung eines Blockelementinhaltes text-align zur Verfügung:

.content h1 {color:white;background:black;padding:5px;text-align:right}

Da hier aber wohl eher der (schwarze) Hintergrund nur die variable Größe des Elementinhaltes ausfüllen/umfassen soll, bietet sich dafür float:right an - sein benachbartes <article>-Element gehört dann zusätzlich mit clear:both formatiert, falls es die Überschrift nicht linksseitig umfließen soll:

.content h1 {color:white;background:black;padding:5px;float:right}
.content article {clear:both}

Sofern du es aber im CSS bei der angewandten absoluten Positionierung belassen willst, die hier gleichermaßen für den variablen Elementhintergrund sorgt, wird einfach im Regelblock anstelle des linken Außenabstandes margin-left:400px mittels right:0 die rechtsbündige Startposition definiert

Der ID-Bezeichner #content darf im Dokumentbaum nur einmalig vorkommen, demnach wird hier stattdessen der Klassenbezeichner .content vergeben:

<div id="wrapper">
	<div class="content">
		<h1></h1>
		<article>
		</article>
	</div>		
	<div class="content">
		<h1></h1>
		<article>
		</article>
	</div>	
	<div class="content">
		<h1></h1>
		<article>
		</article>
	</div>	
</div>

 

[strukturart]

Hallo spicelab,

danke für deine Antwort, hatte eine kleine Denkfehler da ich dachte das automatisch alle Element
mit position: relative deklariert sind.

somit habe ich es jetzt so lösen können:

.content{
    background:white;
    color:black;
    padding:15px;
    padding-left:40px;
    margin-bottom:30px;
    position:relative;
    
}

.content h1{
    color:white;
    background:black;
    display:inline-block;
    position:absolute;
    margin-top:-15px;
    padding:5px;
    right:0px;

}

 

[SpiceLab]

hatte eine kleine Denkfehler da ich dachte das automatisch alle Element
mit position: relative deklariert sind.

Ich weiß zwar nicht, wie dieser kleine Denkfehler mit deiner Frage nach der rechtsbündigen Ausrichtung zusammenhängt, aber die Lösung mit right:0 trifft, wie von mir heute Morgen erläutert, dennoch zu ;-)