CSS DIV-Container Problem, ich werd bekloppt, hilfe!

Hallo

ich versuche heute zum ersten mal, mittels DIV-Containern ein Layout zu erstellen. Ich habe wie �blich einen Header, einen Body und einen Footer. Jeweils ein DIV-Container.

Die drei sind in einem weiteren DIV-Container.

Nun zum Header, an dem beisse ich mir n�mlich die Z�hne aus:

Der Header ist wiederum in 2 DIV-Container aufgeteilt. Links befindet sich das Logo als Hintergrundbild, und rechts ist Platz (z.b. f�r nen Banner).

Da wo der Platz f�r den Banner ist, habe ich 3 DIV Container rein geschmissen, die �bereinander liegen. Im mittleren DIV-Container versuche ich mit weiteren einzelnen kleinen DIV-Containern st�ck f�r St�ck eine "Karteikarten-Lasche" zusammen zu basteln. Grafiken sind schon erstellt. Und mit Tabellen w�re das �berhaupt gar kein Problem.

Und da klemmts: Das erste Segment der Karteikarten-Lasche funktioniert. Dann kommt das Mittelst�ck. Und das funktioniert �berhaupt nicht! Ob wohl Breite und L�nge alles passt und genau berechnet, wird es eine Zeile weiter drunter platziert! AUSSERHALB des DIV-Containers. Zur Kontrolle habe ich einen Rahmen eingeblendet. Das verfluchte Hintergrundbild befindet sich einfach ausserhalb. Wie zum kukuk geht das??? Dann habe ich alles m�gliche eingegeben um diese bescheuerten Linebreaks zu vermeiden. Auch schon die gesamte Struktur im Quellcode auf eine einzige Zeile gebracht. Ohne wirkung!

Ich werde noch bekloppt!!!

-----------------------------------------------------------------

hier der DIV-Container wo der Header mit Logo und (nicht funzendem) Karteikarten-DIVs enthalten ist:

    <div id="header">
      <div id="header_logo"></div>
	  <div style="width:100%; height:66px; border:0px; border-color:#000000; border-style:solid; padding:0px;">banner</div>
	  <div style="width:100%; height:28px; border:1px; border-color:#f0f00f; border-style:solid; padding:0px; text-align:rechts; white-space:nowrap;">
	  	
	  	<div style="width:10px; height:28px; padding:0px; background:url(../grafik/topnav_line_links.jpg) no-repeat; white-space:nowrap;"></div>
	  	<div style="width:*; height:28px; padding:0px; background:url(../grafik/topnav_line_oben.jpg) no-repeat; white-space:nowrap;">Link</div>
	  	<div style="width:10px; height:28px; padding:0px; background:url(../grafik/topnav_line_rechts.jpg) no-repeat; white-space:nowrap;"></div>
	  </div>
	  <div style="width:100%; height:21px; border:0px; border-color:#000000; border-style:solid; padding:0px; text-align:left;">z</div>
    </div>

such mal bei google nach einem css-editor .. das hilft sehr oft wenn man nicht alle befehle im köpple hat ..

[xabbuh]

Wenn du den Textfluss um ein Element wieder beenden möchtest, kannst du dafür die CSS-Eigenschaft clear verwenden.

danke, habe ich gemacht... im IE funktioniert es einwandfrei. Beim Firefox aber nicht. Die Elemente sind quasi ineinander gerückt... wenigstens die Linebreaks sind weg.

Wie sage ich in einem DIV-Container, welches Element eine spalte und welches eine Zeile sein soll? Bei Tabellen ist das alles eindeutig definiert mit TR und TD...

[xabbuh]

Um Elemente nebeneinander zu positionieren, musst du die CSS-Eigenschaft float verwenden.