Mit DIV layouten

[Taney]

Hallo Forum, eine kleine Frage.
Ich raffe es gerade nicht, wie ich DIV 4 auf dem folgenden Bild layouten muss?

http://yamuk.com/div.jpg

Ist der Ansatz für DIV 5 so in Ordnung?
Die DIV's brauche ich wahrscheinlich auch nicht irgendwie verschachteln und kann sie direkt untereinander knallen?

<div 1>
</div 1>

<div 2>
</div 2>

<div 3>
</div 3>

<div 4>
</div 4>

<div 5>
</div 5>

Grüße
Taney

[Jonathan]

Das 4. Div ist genau das gleiche wie das dritte, nur musst du eben die höhenangabe anpassen/weglassen. Beim 5. solltest du anstatt margin einfach die eigenschaften left und top verwenden.
Eigentlich musst du das 3. und 4. Div gar nicht floaten.

[Taney]

Hi, vielen Dank.

Eigentlich musst du das 3. und 4. Div gar nicht floaten.

Achso, werde ich gleich mal testen.

Grüße

[Taney]

Hi nochmal,

Eigentlich musst du das 3. und 4. Div gar nicht floaten.

Wenn ich 3. und 4. DIV nicht floate, dann schiebt er beide Divs nicht rechts von DIV 2, sondern platziert es darunter, so dass der rechte Teil leer bleibt.

Grüße

[Jonathan]

Wenn ich 3. und 4. DIV nicht floate, dann schiebt er beide Divs nicht rechts von DIV 2, sondern platziert es darunter, so dass der rechte Teil leer bleibt.

Das müsste sich mit einem margin-left von der Breite des Linksgefloateten divs ändern lassen. Du kannst aber natürlich auch das float lassen.

[Taney]

Hi Jonathan, hoffentlich störe ich nicht.
Habe jetzt float:right weggelassen.
Das ganze habe ich jetzt auch so positioniert, wie ich es haben wollte.
Nur ein kleines Problem noch.

Für DIV 2 und DIV 4 habe ich einen weißen Hintergrund.
Die sollten von der Höhe auch immer gleich sein.
Wenn DIV 2 länger ist oder DIV 4 sieht das blöd aus, sobald beide Spalten nicht bündig aufhören.

Wenn ich alle Divs verlassen und unten mit einem Text weitermache, schiebt sich DIV 4 über den Text unten, falls DIV 4 lang ist.
Ansonsten passen die Positionen.

Der Code sieht so aus:

Zentriert:

<div style="margin:auto; padding:0px; width:600px; ">

<div style="padding:15px;">Div 1<br>
 Überschrift
 </div>

<div style="float:left; width:170px; background-color: #ffffff; background-image:url(../background.gif); background-repeat:no-repeat; padding-left:10px;">
Ein Background oben platziert, der Rest ist weiß.
DIV 2<br>
DIV 2<br>
DIV 2<br>
DIV 2<br>
DIV 2<br>
</div>

<div style="position:absolute;  width:430px;">
DIV 3 ist nun rechts von DIV 2
</div>

<div style="position:absolute; margin-top:25px; width:430px; background-color: #ffffff;">
DIV 4 ist nun auch rechts von DIV 2 und unter DIV 3
</div>

</div>

Test, ab hier sollte die Seite ohne DIV's weitergehen, ohne dass sich ein DIV von oben darüber schiebt.

[Jonathan]

Ich muss zugeben, ich verstehe nicht alles, weil ich auch zu faul bin mir deine Seite jetzt selbst zusammenzubasteln. Aber nur soviel:

Die sollten von der Höhe auch immer gleich sein.
Wenn DIV 2 länger ist oder DIV 4 sieht das blöd aus, sobald beide Spalten nicht bündig aufhören.

Das geht mit gefloaten Elementen nicht. Einzige Möglichkeit sowas zu realisieren ist mit fake-Hintergrundbildern, damit es so aussieht, als wären beide Sachen gleichlang, beide divs bei variabler höhe wirklich gleichlang zu machen geht in browserübergreifend nicht.

Wenn ich alle Divs verlassen und unten mit einem Text weitermache, schiebt sich DIV 4 über den Text unten, falls DIV 4 lang ist.

Eventuell kannst du das mit "clear" oder mit "overflow" lösen, such einfach mal etwas.

[Taney]

Hi,

ich werde mal versuchen, wie sich das faken lässt.
Was ich mit dem "gleich lang" meine, ist folgendes:

http://yamuk.com/div2.jpg

Ansonsten habe ich es fast und kann mich um den Inhalt kümmern

Muss das ganze dann auch noch mit anderen Browsern testen.

Grüße

[Taney]

Jetzt muss ich leider noch einmal stören. Ich hoffe es ist das letzte Mal. Hab da nur noch ein klitzekleines Problemchen.

Habe für folgende Grafik:

http://yamuk.com/beispiel3.jpg

Folgenden Code:
<div style="margin:0px auto; padding:0px; width:680px; ">

<div style="padding:10px;">DIV 1
 </div>

<div style="float:left; width:140px; background-color: #ffffff;">DIV 2
 </div>

<div style="float:right; width:520px; padding:0px; margin:0px; height:5px;">DIV 3
 </div>

<div style="float:right; width:520px; padding:0px; left:0px; right:0px; margin-top:-4px; background-color: #ffffff;">
 </div>

</div>

Sobald aber nun DIV 4 länger wird, verliere ich den schwarzen Bereich in der oberen Grafik.

Wenn ich den style="" für DIV 3 weglasse, dann umfliest der Text auch DIV 2 wie es eigentlich will. Nämlich so:
http://yamuk.com/beispiel4.jpg

Mein Problem nun:
Sobald der Inhalt von DIV 4 mit <table width=90%> anfängt, springt DIV komplett nach unten. 90% wären mehr 520 Pixel, der der Hauptcontent ja 680 breit ist, in dem alle DIV's sitzen.
Nämlich so:
http://yamuk.com/beispiel5.jpg

Jetzt weiß ich nicht, ob es möglich ist, dass sobald der Inhalt von DIV 4 <table width=90%>, er dann diesen auf die vorhandenen 520px bezieht, also rechts von DIV 2. Und sobald wir unter DIV 2 sitz, dann die neue Tabelle darunter <table width=90%> auf die 680px bezieht.
In etwa so:
http://yamuk.com/beispiel6.jpg

Hoffentlich habe ich mein Anliegen einigermaßen herübergebracht :-)

Wäre über jede Hilfestellung sehr dankbar.

Grüße
Taney