div (absolute) innerhalb div (relative): äußere div 0px hoch?

[TomTom]

Liebe Forenschreiber,

ich habe ein Problem mit CSS-Formatierung, die mich momentan schon fast in den Wahnsinn treibt, ich sehe den Wald vor lauter Bäumen nicht mehr. Vielleicht könnt ihr mir helfen...

Ich möchte mehrere Elemente untereinander anordnen (Headline, Subline, Inhalt). Diese Anordnung habe ich mit relativer Positionierung auch (ich denke sauber) hingekriegt. Es passt alles, solange die drei Bereiche jeweils unmittelbar Text beinhalten.

Innerhalb des Inhalt-Blockes möchte ich jetzt aber 2 Textblöcke nebeneinander anordnen (sie beginnen auf selber Höhe, sind verschieden horizontal positioniert und haben verschieden viel Inhalt).
Das erreiche ich (so denke ich) durch absolute Positionierung von zwei div-Elementen innerhalb des Inhalt-Blockes.

Füge ich aber statt des bisherigen normalen Textes in den Inhalt-Block zwei absolut positionierte div-Elemente ein, so hat der umgebende Inhalt-Block keine Höhe mehr (0px), d.h. die beiden Spalten ragen über die (nicht existente) Fläche des umgebenden Blockes hinaus (sind also sichtbar). Nachteiliger Effekt: Durch die Höhe 0 des Inhalt-Blockes rücken Elemente von weiter unten im Dokument nach, und überlagern sich mit den herausragenden Textspalten.

Was ich nicht verstehe: Warum werden die beiden divs nicht als Inhalt des Inhalt-Blockes gerechnet, warum fällt dieser auf 0px Höhe zusammen? Wie kann so etwas entstehen, und wie kann ich es verhindern/aufheben?
Ich arbeite in html 4.01 strict, die Darstellung ist in den getesteten Browsern FF1.5 IE6sp2 und Opera 8.5 identisch.

Vielleicht mach auch nur ein einen schlimmen Anfänger- oder Denkfehler...

Vielen Dank für die Hilfe
TomTom

Hier noch der Code:

der Inhalt-Block:
.inhalt {
  position:relative;
  left:0px; top:0px;
  }

die einzelnen Textblöcke (horizontal unterschiedlich werden sie dann direkt im html-code per style-attribut ausgerichtet)
.textblock {
  position:absolute;
  top:0px;
}

der html-part:
<div class=inhalt>
   <div class=textblock>Spalte 1 spalte 1 asdfadsfasdfasdfasdf</div>
   <div class=textblock style="left:580px;">Spalte 2 Spalte 2</div>
</div>

[TomTom]

weitere Anmerkungen:

Das ganze ist natürlich eingebettet in mehr, d.h. es könnte durchaus Vererbung eine Rolle spielen (ich wüsste allerdings nicht was konkret).

Aber generell: Welche CSS-Elemente verhindern, dass ein div als Inhalt eines anderen DIVs gewertet wird, sodass das Mutter-DIV scheinbar keinen Inhalt besitzt und dadurch 0 Höhe hat?

[Harlequin]

Hi,

Aber generell: Welche CSS-Elemente verhindern, dass ein div als Inhalt eines anderen DIVs gewertet wird, sodass das Mutter-DIV scheinbar keinen Inhalt besitzt und dadurch 0 Höhe hat?

Das kommt durch das position:absolute. Dadurch wird das Element aus dem Textfluss genommen und zählt somit nicht mehr als Inhalt.

Gruß,

Harlequin

[TomTom]

Vielen Dank, Problem erkannt...

Folgefrage: wie kriege ich alternativ zwei Textspalten nebeneinander? Sind sie relative positioniert, erscheinen sie ja zwangsläufig untereinander, wenn ich das richtig verstanden habe.

Das ganze sollte am Ende etwa so aussehen (ich hoffe es klappt):

---Inhaltsblock-------------
Spalte 1       Spalte 2
Spalte 1       Spalte 2
Spalte 1       Spalte 2
Spalte 1       Spalte 2
Spalte 1       Spalte 2
Spalte 1
Spalte 1
Spalte 1
----------------------------

wobei der gesamte Inhaltblock im Textfluss steht (relative).

[Harlequin]

Hi,

Folgefrage: wie kriege ich alternativ zwei Textspalten nebeneinander? Sind sie relative positioniert, erscheinen sie ja zwangsläufig untereinander, wenn ich das richtig verstanden habe.

damit kämpfe ich im Moment auch... im Prinzip sollte es mit float:left gehen, allerdings wirds schwierig wenn man das mehrfach geschachtelt verwenden will.

Gruß,

Harlequin

[TomTom]

damit kämpfe ich im Moment auch... im Prinzip sollte es mit float:left gehen, allerdings wirds schwierig wenn man das mehrfach geschachtelt verwenden will.

Danke. Damit habe ich auch schon gekämpft, das ganze klappt aber mit 3 oder mehr Spalten noch viel weniger, deshalb habe ich es wieder aufgegeben.
Ich habe einen mehr oder weniger manuellen Lösungsweg für meinen spezifischen Anwendungsfall: Das längste Element ist relativ positioniert, alle weiteren Spalten absolut. Ich habe keine Texte aus Datenbanken etc., d.h. ich kann es von Fall zu Fall abschätzen.
Schön wäre es natürlich gewesen wenn es "automatisch geht.

[Kalle_B]

Danke. Damit habe ich auch schon gekämpft, das ganze klappt aber mit 3 oder mehr Spalten noch viel weniger

Nöö, klappt ganz gut, z.B fünfspaltig:

.fuenf {float:left;width:18%;margin-right:2%}
.clear {clear:both}

<div>

<div class=fuenf>
Spalte1<br>
...
</div>

<div class=fuenf>
Spalte2<br>
</div>

<div class=fuenf>
Spalte3<br>
...
</div>

<div class=fuenf>
Spalte4<br>
...
</div>

<div class=fuenf>
Spalte5<br>
...
</div>

<div class=clear></div>

</div>

Kalle

[Kalle_B]

damit kämpfe ich im Moment auch... im Prinzip sollte es mit float:left gehen

Nöö, das allein reicht nicht, es muss mit einer Breite kombiniert werden, die DANEBEN noch die andere Spalte zuläßt:

.li {float:left;width:49%}
.re {float:right;width:49%}
.clear {clear:both}
.border {border:1px solid #000}

<div class=border><div class=li>
linke Spalte<br>
linke Spalte<br>
linke Spalte<br>
linke Spalte<br>
linke Spalte<br>
linke Spalte<br>

<div><div class=re>
rechte Spalte<br>
rechte Spalte<br>
rechte Spalte<br>

</div>
<div class=clear></div>
</div>

Der umhüllende div umfasst beide Spalten. Danach geht's normal weiter.

Problem beim IE: Er war krank, als die Prozentrechnung in der Unterstufe dran war und erfindet seine eigene Version.

Kalle

[Harlequin]

damit kämpfe ich im Moment auch... im Prinzip sollte es mit float:left gehen

Nöö, das allein reicht nicht, es muss mit einer Breite kombiniert werden, die DANEBEN noch die andere Spalte zuläßt:

Das war auch nur als ein Denkanstoß und nicht als komplette Lösung gedacht. Allerdings habe ich ein Darstellungsproblem, wenn ich diese Methode schachtele, also in einem Div mit float das ganze nochmals mache. Siehe auch mein anderes Posting etwas weiter oben.

Gruß,

Harlequin

[Detlef G.]

Hallo Harlequin

Das war auch nur als ein Denkanstoß und nicht als komplette Lösung gedacht. Allerdings habe ich ein Darstellungsproblem, wenn ich diese Methode schachtele, also in einem Div mit float das ganze nochmals mache. Siehe auch mein anderes Posting etwas weiter oben.

Dann kannst/musst du das clear weglassen.
Ein gefloatetes Element wird durch gefloatete Elemente in ihm auch vergrößert.
Dazu kann ich dir float-Umgebungen verschachteln empfehlen.

Auf Wiederlesen
Detlef

[Joachim]

Hi,

Aber generell: Welche CSS-Elemente verhindern, dass ein div als Inhalt eines anderen DIVs gewertet wird, sodass das Mutter-DIV scheinbar keinen Inhalt besitzt und dadurch 0 Höhe hat?

position:absolute
Damit nimmst Du das Element aus dem Fluss.
Aehnlich wie bei float uebrigens...

Gruesse, Joachim

[at]

Hallo.

ich habe ein Problem mit CSS-Formatierung, die mich momentan schon fast in den Wahnsinn treibt, ich sehe den Wald vor lauter Bäumen nicht mehr.

Ganz einfach:

#wald {display: block; visibility: visible;}  
.baum {visibility: hidden;}

MfG, at