KNIFFLIGES PROBLEM: Höhe des ABSOLUTEN KIND-DIVs auf RELATIVES ELTERN-DIV übertragen.

[Souldelivery83]

Einen wunderschönen Sonntag-Morgen Euch allen.

Ich habe ein kniffliges Problem, für welches ich leider nirgens eine Lösung finden konnte.

Folgender Aufbau ist gegeben:

<div id="Eltern"> (<- relativ positioniert)


<div id="Kind">VARIABLER INHALT</div> (<- absolut positioniert)

Sonstiger Inhalt des Elternelements


</div>

Die Größe des Kind-DIVs ist variabel.
Die Größe des Eltern-DIVs soll anhand des Kind-Elements bestimmt werden.

Ich hoffe Ihr könnt mir bei meinem Problem weiterhelfen.

Ich wünsche Euch ein angenehmes Weihnachtsfest.

Gruß
Souly

 

[Gumbo]

Versuche mal auch das Kind-Element relativ zu positionieren.

 

[Souldelivery83]

Hallo Gumbo.

Danke für den Tip.

Eine Änderung der Positionierung von absolute auf relative ist leider nicht möglich, da der gewünschte Effekt mit einer relativen Positionierung des Kind-Elements leider nicht erreicht werden kann.

 

[Gumbo]

Welcher Effekt ist denn gewünscht?

 

[Souldelivery83]

Es ist so, dass ich einen Seitenaufbau habe:

ZELLE1 ZELLE2

ZELLE 1 = Navigation
ZELLE 2 = Content

Optisch soll dieser Aufbau beibehalten werden.
Vom Code her soll der Aufbau aber wie folgt sein:

ZELLE 2 ZELLE 1

Der Content ist wichtiger als die Navigation und soll daher ganz oben stehen.

Ob das sinnvoll ist? Da scheiden sich die Geister.
Versuchen möchte ich es aber.
Es klappte soweit auch wunderbar, scheitert lediglich an oben beschriebenem Problem.

 

[Maik]

Hi,

wenn das Layout eine fixe Breite besitzt, wäre folgendes möglich:

#eltern {
width:800px;
margin:0 auto;
border:1px solid #000;
}

#navigation {
margin-right:600px;
}

#content {
float:right;
width:600px;
}

/* Die nachfolgenden Regeln heben die Floatumgebung auf */

.clearfix:after { 
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

<div id="eltern" class="clearfix">
     <div id="content">content</div>
     <div id="navigation">navigation</div>
</div>