✔ Div anhand anderem Div ausrichten

[muck86]

Hallo,

ich habe ein Problem bei der Positionierung meiner Divs.

Hier mein Layout:

Ich möchte das das Div #2 immer 25px unterm Div #1 positioniert ist, egal wie das Div #1 wächst.

Hab leider keine Ahnung wie man das macht, bitte um Hilfe

Danke und Liebe Grüße,
Michael

 

[PHPINFOS]

Hallo

HTML code

<div class="div1"></div>
<div class="div2"></div>

okay und jetzt der css code

<style type="text/css">
<!--
.div1
{
margin:25px 0 0 0;
}
-->
</style>

So den rest kannst du ja selber ergänzen nach deinen vorstellungen.

 

[SpiceLab]

Ich möchte das das Div #2 immer 25px unterm Div #1 positioniert ist, egal wie das Div #1 wächst.

HTML code

<div class="div1"></div>
<div class="div2"></div>

okay und jetzt der css code

<style type="text/css">
<!--
.div1
{
margin:25px 0 0 0;
}
-->
</style>

So den rest kannst du ja selber ergänzen nach deinen vorstellungen.

Aber bitte zunächst noch den Regelblock deiner genannten Vorgabe anpassen.

Entweder:

.div1
{
margin:0 0 25px 0; /* Abstand nach unten */
}

oder:

.div2
{
margin:25px 0 0 0; /* Abstand nach oben */
}

 

[muck86]

Danke schon mal für die Antworten. Geht ja echt rasch

Nur hab ich ein Problem: jetzt hab ich also einen unteren Rand aufs Div1 gelegt. Wie positioniere ich das Div2? CSS zum Div2 sieht derzeit so aus:

#sponsoren {
	position:absolute;
	top:384px;
	left:835px;
	width:177px;
	height:30px;
	background-image: url(style/boxschrift.jpg);

 

[SpiceLab]

Mit deiner absoluten Positionierung wird das Element / die Elemente aus seinem / ihrem normalen Textfluß genommen, womit die margin-Regelung auch nicht mehr greifen kann.

Um den erforderlichen top-Regelwert des nachfolgenden DIVs zu ermitteln, müsstest du hier JS zu Rate ziehen, um die unbekannte/variable Höhe des vorherigen absolut positionierten Blocks zu ermitteln, und durch Addition aller drei Werte (top-, height-, margin-Eigenschaft) den aktuellen top-Wert an das Element zu übergeben - siehe offsetHeight und offsetTop.

 

[PHPINFOS]

ja ist mir gestern noch eingefallen das ich die 25px falsch gesetzt hab ich meint

<style type="text/css">
<!--
.div 1
{
margin:0 0 25px 0;
}
-->
</style>

 

[SpiceLab]

ja ist mir gestern noch eingefallen das ich die 25px falsch gesetzt hab ich meint

<style type="text/css">
<!--
.div 1
{
margin:0 0 25px 0;
}
-->
</style>

Das hatten wir hier schon tags zuvor, direkt nach deinem Post geklärt.