DIV Boxen verschachteln

[gunni]

Liebes Forum,
leider finde ich keine Lösung folgende Darstellung mittels CSS zu realisieren:

--------------------------------------------------------------------------
|           |          | Div-Box 4 mit P Tags als Inhalt (variable Länge) |
|           |           --------------------------------------------------
|           |          | Div-Box 5 mit P Tags als Inhalt (variable Länge) |
|           |Div-Box 2  --------------------------------------------------
|           |          | Div-Box 6 mit P Tags als Inhalt (variable Länge) |
|           |           --------------------------------------------------
| Div-Box 1 |          | Div-Box 7 mit P Tags als Inhalt (variable Länge) |
|            -------------------------------------------------------------
|           |          | Div-Box 8 mit P Tags als Inhalt (variable Länge) |
|           |           --------------------------------------------------
|           |Div-Box 3 | Div-Box 9 mit P Tags als Inhalt (variable Länge) |
|           |           --------------------------------------------------
|           |          | Div-Box 10 mit P Tags als Inhalt (variable Länge)|
--------------------------------------------------------------------------

Der Text in der Div-Box 1 soll immer vertikal mittig zur Gesamthöhe aller anderen Boxen dargestellt werden.
Der Text in der Div-Box 2 soll immer vertikal mittig zur Gesamthöhe der Boxen 4, 5, 6, und 7 sein. Für Div-Box 3 gilt gleiches wie für Box 2 nur mit der Referenz auf Box 8, 9 und 10.
Die Boxen 4-10 können aber immer unterschiedlich hoch ausfallen, je nach Inhalt.

Ich hoffe jemand kann mir da weiterhelfen, ich bekomme diese Darstellung nur mit fester Höhe realisiert. Aber die Höhe ist leider variabel.

Vielen Dank
gunni

[foomaker]

---

|          | Div-Box 4 mit P Tags als Inhalt (variable Länge) |
          |           --------------------------------------------------
          |          | Div-Box 5 mit P Tags als Inhalt (variable Länge) |
          |Div-Box 2  --------------------------------------------------
          |          | Div-Box 6 mit P Tags als Inhalt (variable Länge) |
          |           --------------------------------------------------
Div-Box 1 |          | Div-Box 7 mit P Tags als Inhalt (variable Länge) |
           -------------------------------------------------------------
          |          | Div-Box 8 mit P Tags als Inhalt (variable Länge) |
          |           --------------------------------------------------
          |Div-Box 3 | Div-Box 9 mit P Tags als Inhalt (variable Länge) |
          |           --------------------------------------------------
          |          | Div-Box 10 mit P Tags als Inhalt (variable Länge)|

---

Vielleicht hilft dir das:

wobei das linke div2 und das linke div4 mit css 'float:left; vertical-align:middle;' "gestylt" werden.

Gruß vom foomaker

[gunni]

Vielleicht hilft dir das:

Super, das ist genau das was ich brauche, nur woher weiß der linke blaue Div2 wie hoch der rechte blaue Div2 ist. Und der linke grüne Div4 wie hoch der rechte grüne Div4 ist? die Höhe vom jeweils rechten Div ist abhängig vom Inhalt und damit kann ich keine feste Höhe angeben.

wobei das linke div2 und das linke div4 mit css 'float:left; vertical-align:middle;' "gestylt" werden.

Gruß vom foomaker

[bleicher]

Grüße,

• das ist wieder so eine div-suppe, dass ich doch eine Tabelle nehmen würde. DIVs sollten ein Hilfsmittel, keine Religion sein.
  MFG
  bleicher

[Gunnar Bittersmann]

@@gunni:

nuqneH

Sind es tabellarische Daten? Dann 'table' mit @rowspan für 'th'/'td'.

Qapla'

[gunni]

@@gunni:

nuqneH

Sind es tabellarische Daten? Dann 'table' mit @rowspan für 'th'/'td'.

da bin ich mir nicht so ganz sicher. Das ganze soll in ein Formular. in den rechten Boxen befindet sich eine Select-Box, ein Image und ein Kommentarsfeld. Ich glaube daher eigentlich sollte ich keine Tabelle verwenden - oder?
LG gunni

Qapla'

[Gunnar Bittersmann]

@@gunni:

nuqneH

Ich glaube daher eigentlich sollte ich keine Tabelle verwenden - oder?

Wie soll man das beantworten ohne zu wissen, was in der linken und mittleren Spalte steht?

Qapla'

[gunni]

@@gunni:

nuqneH

Ich glaube daher eigentlich sollte ich keine Tabelle verwenden - oder?

Wie soll man das beantworten ohne zu wissen, was in der linken und mittleren Spalte steht?

in der linken steht der Hauptabstimmungspunkt, in der Mittleren der Unterabstimmungspunkt. Rechts dann der eigentliche Punkt und die Select-Box, Grafik und Textbox. (Beispiel von links nach rechts: 1. XYZ | 1.1 XYZ | 1.1.1 XYZ...).
LG
Gunther

Qapla'

[Gunnar Bittersmann]

@@gunni:

nuqneH

@@gunni:

nuqneH

Ich glaube daher eigentlich sollte ich keine Tabelle verwenden - oder?

Wie soll man das beantworten ohne zu wissen, was in der linken und mittleren Spalte steht?
in der linken steht der Hauptabstimmungspunkt,

Also eine Kopfzelle 'th' für alles rechts davon.

in der Mittleren der Unterabstimmungspunkt.

Also eine Kopfzelle 'th' für alles rechts davon.

Da kann man schon mal Fünfe gerade sein lassen und eine Tabelle nehmen.

Ansonsten wäre auch keine 'div'-Suppe angesagt, sondern verschachtelte Listen:

<ol>  
  <li>1. XYZ  
    <ol>  
      <li>1.1 XYZ  
        <ol>  
          <li>1.1.1 XYZ</li>  
          <li>1.1.2 XYZ</li>  
        </ol>  
      </li>  
      <li>1.2 XYZ  
        <ol>  
          <li>1.2.1 XYZ</li>  
          <li>1.2.2 XYZ</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
  <li>2. XYZ  
    <ol>  
      <li>2.1 XYZ  
        <ol>  
          <li>2.1.1 XYZ</li>  
          <li>2.1.2 XYZ</li>  
        </ol>  
      </li>  
      <li>2.2 XYZ  
        <ol>  
          <li>2.2.1 XYZ</li>  
          <li>2.2.2 XYZ</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

Qapla'

[gunni]

Ich glaube daher eigentlich sollte ich keine Tabelle verwenden - oder?

Wie soll man das beantworten ohne zu wissen, was in der linken und mittleren Spalte steht?
in der linken steht der Hauptabstimmungspunkt,

Also eine Kopfzelle 'th' für alles rechts davon.

in der Mittleren der Unterabstimmungspunkt.

Also eine Kopfzelle 'th' für alles rechts davon.

Da kann man schon mal Fünfe gerade sein lassen und eine Tabelle nehmen.

okay, ich dachte eine Tabelle kommt nicht in Frage, sobald Select-Boxen und Kommentarsfelder innerhalb einer Spalte vorkommt. Aber wenn das geht ist eine Tabelle die einfachste Lösung.
Vielen Dank.

Ansonsten wäre auch keine 'div'-Suppe angesagt, sondern verschachtelte Listen:

<ol>

<li>1. XYZ
    <ol>
      <li>1.1 XYZ
        <ol>
          <li>1.1.1 XYZ</li>
          <li>1.1.2 XYZ</li>
        </ol>
      </li>
      <li>1.2 XYZ
        <ol>
          <li>1.2.1 XYZ</li>
          <li>1.2.2 XYZ</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>2. XYZ
    <ol>
      <li>2.1 XYZ
        <ol>
          <li>2.1.1 XYZ</li>
          <li>2.1.2 XYZ</li>
        </ol>
      </li>
      <li>2.2 XYZ
        <ol>
          <li>2.2.1 XYZ</li>
          <li>2.2.2 XYZ</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Ist auch eine gute Idee. Nur Text und Select-Boxen in eine "li"?  

>   
> Qapla'

[suit]

Ist auch eine gute Idee. Nur Text und Select-Boxen in eine "li"?

Was spricht dagegen?