Divs verschieben

[fireblade1875]

.

 

[ein schlauer]

Kann mir bitte jemand helfen??

Nicht mit einem Bild und einem CSS Fragement.

 

[fireblade1875]

.

 

[fireblade1875]

.

 

[ein schlauer]

Mal wieder so ein Fall, wo ein fullquote angebracht gewesen wäre.

 

[kkapsner]

Hallo,

ich erstelle gerade mit Ajax eine Seite die in einem CMS einen Seitenbaum repräsentieren soll. Das Ganze sieht ähnlich aus wie bei Typo3...falls das jemand kennt.
Nun zu meinem Problem:
Ich erstelle Div-Container, die die Seiten repräsentieren. Die Hauptseiten sind ganz links angeordnet. Die ersten Unterseiten schieben sich zwischen die Hauptseiten... d.h. evtl. bereits bestehende Seiten werden dann weiter nach unten geschoben... so soll es ja sein. Wenn ich nun aber Unterseiten von den Unterseiten erstelle, legen diese sich aber einfach über die bereits bestehenden Seiten und verschieben den Seitenbaum nicht mehr.. ich hoffe in der angehängten Grafik kann man das erkennen: Die grünen Divs sind die Hauptseiten, die roten die Unterseiten der ersten Kategorie... bis hierhin klappt es. die gelben Divs sind dann die Unterseiten der zweiten Kategorie... und hier gehts nicht mehr weiter...
Hier mal das CSS:
Haupseite:
clear:left;border: 1px solid black; width: 150px; height: 100px; background-color: green;margin-top:20px;
1 Unterseite:
float:left;border: 1px solid black; width: 150px; height: 100px; background-color:red;margin-top:20px;margin-left:155px;
2 Unterseite:
float:left;border: 1px solid black; width: 750px; height: 100px; background-color:yellow;

Normalerweise habe ich mit CSS keine Probleme... aber das hier schafft mich...
Kann mir bitte jemand helfen??
Gruß
Erik

Ok dann mal etwas ausführlicher...
hier das Script das die Divs erstellt:

Zuerst für die Hauptseiten:

function hauptseite_erstellen()
{

var new_div = document.createElement("div");
new_div.setAttribute("style", "clear:left;border: 1px solid black; width: 150px; height: 100px; background-color: green;margin-top:20px;",0);
new_div.id="HS_id"+id_Hauptseite;
var Ausgabebereich = document.getElementById("arbeitsflaeche");
Ausgabebereich.appendChild(new_div);
document.getElementById('HS_id'+id_Hauptseite).innerHTML = '<input type="button" value="+Hauptseite" onClick="hauptseite_erstellen()"><input type="button" value="+Unterseite" onClick="unterseite_erstellen(this)"><br>ID=HS_id'+id_Hauptseite;
id_Hauptseite++;

}

Und hier das Script für die Unterseite

function unterseite_erstellen(elem)
{
var eltern_id = elem.parentNode.id;
var new_div = document.createElement("div");
new_div.setAttribute("style", "float:left;border: 1px solid black; width: 150px; height: 100px; background-color:red;margin-top:20px;margin-left:155px;",0);
new_div.id="US_id"+id_Unterseite;
var Ausgabebereich = document.getElementById(eltern_id);
Ausgabebereich.appendChild(new_div);
document.getElementById('US_id'+id_Unterseite).innerHTML = 'ID=US_id'+id_Unterseite+'<br>'+eltern_id+'<input type="button" value="+Unterseite" onClick="unterseite_erstellen_2(this)">';
id_Unterseite++;

}

function unterseite_erstellen_2(elem)
{
var eltern_id = elem.parentNode.id;
var new_div = document.createElement("div");
new_div.setAttribute("style", "float:left;border: 1px solid black; width: 750px; height: 100px; background-color:yellow;",0);
new_div.id="US_id"+id_Unterseite;
var Ausgabebereich = document.getElementById(eltern_id);
Ausgabebereich.appendChild(new_div);
document.getElementById('US_id'+id_Unterseite).innerHTML = 'ID=US_id'+id_Unterseite+'<br>'+eltern_id+'<input type="button" value="+Unterseite" onClick="unterseite_erstellen_2(this)">';
id_Unterseite++;

}

So wie ich das sehe, ist das Problem folgendes: bei den Hauptseiten wird das floating gecleart; die ersten Unterseiten bekommen float:left.
Das funktioniert dann ... aber die Unterseiten der 2. Kategorie bekommen ja auch float:left... hier ist nun das Problem, daß die Unterseiten der 1.Kategorie float:left haben... hier würde nun aber clear:left benötigt... Kennt jemand eine Lösung für das Problem?

Kann man ja auch noch nachträglich machen