Layoutproblem mit DIVs

[hondocrx]

Hallo.

Ich habe folgenden Code (nur Auszug)

<div id="main">

 <div id="nest"><!-- #nest oeffnen-->
  <div id="leftBox"><!-- #leftBox oeffnen     1-->

      <div id="left_1"></div> <!-- #left1     2-->
      <div id="left_2"></div> <!-- #left2     3-->

  </div><!-- #leftBox schliessen -->

  <div id="content"><!-- #content oeffnen     4-->

   1111

  </div><!-- #content schliessen -->

 </div><!-- #nest schliessen -->

</div><!-- #main schliessen -->

mit folgendem Ergebnis (siehe Bild)

Wie bekomme ich es hin das der Text CONTENT nicht erst unter dem LEFT_2 angezeigt wird sondern schon oben in CONTENT.

Vielen Dank schon mal im Vorraus.

MfG hondocrx

 

[psifactory]

Blick da gerade nicht ganz durch was was ist. Beschreib mal anhand deiner Farben. Seh ich das richtig dass das Blaue dein Content ist oder das Grüne?

 

[Icromaxx]

Da ich mal davon ausgehe, dass du bei der Positionierung mit CSS rumgespielt hast, wahrscheinlich auch noch mit float oder absoluter positionierung, wäre es einfacher, wenn du uns auch noch mal das Css Gegenstück zeigen könntest!

 

[hondocrx]

Ups, an den CSS-Teil habe ich nicht gedacht.

Die Farben und Ränder sind zur Zeit nur zum erstellen der Seite nötig.

Will mal schnell erklären wasich eigentlich haben möchte.

Die Anzeige soll 90% der Bildschirnbreite einnehmen.
In Spalte 1 soll die Navigation (2+3) rein und eine feste Breite haben.
Die Aufteilung in 2 und 3 ist nötig da bei voller Bidlschirmhöhe DIV2 oben steht und DIV3 unten. Hat der Bildschirm weniger als eine bestimmte Höhe verden die Inhalte getauscht(mit JS) und so ist immer der wichtigste Teil der Navigation zu sehen.

In DIV4 soll der per PHP generiert Inhalt (Bilderliste).
Dieser soll nicht auf die BIldschirmgröße begrenzt bleiben.
Das Browserfenster kann ruhig eine Scrolleiste bekommen.
Schön wäre es wenn DIV4 die gleiche Höhe wie DIV1 haben könnte.
Ist aber nicht ganz so wichtig.

Schon mal Danke im Vorraus wenn jemand draufschauen könnte

body {
 background-color: white; color: black;
 margin:0 auto;  /* main-Box zentrieren in IE 5 und hoeher */
 text-align:center; /* main-Box zentrieren in IE 5 und hoeher */
 font-size:100%; font-family: verdana, helvetica,sans-serif;
 }
#main {
 background-color: blue; color: white;
 border: 1px solid black;
 width: 90%; /* oder auch z.B. 800px */
 margin: 10px auto;  /* main-Box vertikal zentrieren, Rand oben + unten 10px */
 text-align:center; /* main-Box vertikal zentrieren in Opera, NN, Mozilla */
 }

#nest {
 background-color:red;color:black;
 font-size:80%;
 text-align: left;
 }
#leftBox {
 background-color: red; color:black;
 width: 200px; float:left;
 border-right:2px solid black;
 }

#content {
 background-color: blue; color:white;
 margin:0; margin-left: 200px;
 border-left:2px solid black;
 }

#left_1 {
 width:150px;
 height:200px;
 background-color:#00FF00;
 float:left;
 border:1px solid #aaaaaa;
 -moz-border-radius:20px;
 font-family: Verdana;
 font-size:10px; 

 padding-top:20px;
 padding-bottom:20px
 padding-right:20px;
 padding-left:20px

 }


#left_2 {
 width:150px;
 height:200px;
 background-color:#00FF00;
 float:left;
 border:1px solid #aaaaaa;
 -moz-border-radius:20px;
 font-family: Verdana;
 font-size:10px;

 padding-top:20px;
 padding-bottom:20px
 padding-right:20px;
 padding-left:20px

}

 

[Icromaxx]

Ist doch ganz simpel, wenn ich das richtig sehe, du hast deinem Nest kein float und nichts gegeben und da es das Mutterobjekt der gefloateten ist, hilft dir der float innerhalb des nestes auch nicht. Der text wird hinterher geschrieben, weil der Spass, also das Nest, nicht gefloated ist.

Ganz nebenbei leidet dein Script an der Tatsache das du viel zu viele Divs benutzt und nicht annährend so viele brauchst, also wenn's geht überarbeite den Spaß nochmal!