[css] div an div ausrichten

mtl · 30.08.2010

Ich habe einen Container mit einem Inhalt drin (#container), am ende dieses DIVs soll daran soll ein anderer Container angehängt werden (#container.child), also quasi wie ein Footer der sich relativ zum Ende des Content-DIVs verschiebt.

Hier ist mein Code:

Code:

<head>
<style type="text/css">
<!--
#content
    {
        position:absolute;
        top:200px;
        background:#E9372E;
    }

#content.child
    {
        position:relative;
        top:22px;
        background:#00FF40
    }
-->
</style>
</head>


<body>
    <div id="content">Das hier ist der Content div</div>
    <div id="content" class="child">Div was unterhalt dem Content angehängt werden soll</div>    
</body>

Doch leider funktioniert das nicht so wie ich mir das gedacht habe. Ich bin der Meinung, dass sich der Child-div wegen des position:relative und top:22px eigentlich auch mit diesem Abstand relativ zum #content verhalten soll. Tut es aber nicht und ich steh' grad auf dem Schlauch. Was mache ich falsch?

lg mtl

cebito · 30.08.2010

AW: [css] div an div ausrichten

Lass "position" weg und mach deine Abstände mit margin(top)

mtl · 30.08.2010

AW: [css] div an div ausrichten

so einfach..

danke dir!

sokie · 30.08.2010

AW: [css] div an div ausrichten

<body>
<div id="content">Das hier ist der Content div</div>
<div id="content" class="child">Div was unterhalt dem Content angehängt werden soll</div>
</body>

child ist nicht Kind, sondern Geschwister
soll child ein Kindelement von content sein, muss es innerhalb von content notiert werden:

Code:

<body>
<div id="content">Das hier ist der Content div
       <div class="child">Div was unterhalt dem Content angehängt werden soll</div>
</div>    
</body>

so geschachtelt wird .child immer unterhalb vom Content des #content sein
div .child darf keine id="content" haben. IDs dürfen nur einmal verwendet werden.