nicht angemeldet
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>