droom: DIVS mit css anpassen

Hi folks,

ich habe folgende Struktur:

<div id="flex">

<div id="flex1">
<div class="im1"></div>
<div class="te1"></div>
</div>

<div id="flex2">
<div class="im2"></div>
<div class="te2"></div>
</div>

</div>

Ich möchte gern so was haben:
|-------------------------------------------------|
|flex                                             |
||-----------------------| |---------------------||
||flex1                  | |flex2                ||
|||-------|  |----------|| ||-------|  |--------|||
|||im1    |  |te1       || ||im2    |  |te2     |||
|||-------|  |----------|| ||-------|  |--------|||
||-----------------------| |---------------------||                                          |-------------------------------------------------|

Ich habe schon so viel probiert aber ich komme einfach nicht zu der richtigen Kombination. Ich möchte nicht mit festen Höhen arbeiten, denn der flex_div soll sich an das Bild bzw. den Text anpassen.

  1. Ich möchte gern so was haben:

    es geht in erster linie darum, was du logisch haben willst - die formatierung ist dann meistens recht einfach

    1. @@suit:

      Ich möchte gern so was haben:

      Ich würde solche 'div'-Suppe nicht haben wollen.

      es geht in erster linie darum, was du logisch haben willst

      Das mal übersetzt:

      Das Ganze ("flex") ist wohl eine Liste (und zwar eine geordnete, wie "flex1" und "flex2" vermuten lassen); das äußere Element ist also 'ol'.

      "flex1" und "flex2" sind Listemelemente 'li'.

      In diesen gibt es – Glaskugel an – ein Bild "im1" und einen Text "te1". Ein weiteres Element für das Bild ist vermutlich überflüssig; Text füllt sich in 'p' wohl. Die Klassen sind überflüssig; der Selektor für Nachfahren exisstiert.

      Das Markup sähe dann so aus:

      <ol id="flex">  
        <li id="flex1">  
          <img/>  
          <p></p>  
        </li>  
        
        <li id="flex2">  
          <img/>  
          <p></p>  
        </li>  
      </ul>
      

      die formatierung ist dann meistens recht einfach

      Eben. ;-)

      Ich habe schon so viel probiert aber ich komme einfach nicht zu der richtigen Kombination.

      Wenn du verheimlichst, was du probiert hast, kann dir auch niemand sagen, was daran falsch war.

      Live long and prosper,
      Gunnar

      --
      Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
      1. n'Abend Gunnar,

        ich weiß ja nicht, was für ein edles Getränk du gerade zur Hand hast - aber offensichtlich ist es deiner Konzentration abträglich.

        Text füllt sich in 'p' wohl.

        Yo, da füllt er sich wohl so langsam ab. ;-)

        der Selektor für Nachfahren exisstiert.

        Lassss ihn doch exisss... exisstiern.

        Das Markup sähe dann so aus:

        <ol id="flex">

        [...]
        </ul>

          
        Irgendwas passt da nicht zusammen.  
          
        Bis morgen dann,  
         Martin  
        
        -- 
        [Bitte komme jemand](http://community.de.selfhtml.org/zitatesammlung/zitat7) mit einem \*g\* zum Wochenende, damit nicht über mich gelacht wird.  
          (Gunnar Bittersmann)
        
        1. ich weiß ja nicht, was für ein edles Getränk du gerade zur Hand hast - aber offensichtlich ist es deiner Konzentration abträglich.

          was auch immer gunnar zusich genommen hat
          a) ich will das auch
          und
          b) er kann damit trotzdem noch logisch denken, die fehlerquote ist dabei ein vertretbares (?) übel

  2. Hi,

    wie sehen die Klassen im1, im2, und die CSS-Bestimmungen für #flex1 und #flex2 aus?

    Du könntest mit Floats arbeiten. Außerdem würde ich dann allen Elementen Breitenangaben geben.

    css für die Floats:

    div.im1,
    div.im2,
    div#flex1 {
    float: left;
    }

    <scnr>
    Wie du allerdings die div#flex soweit rechts enden lässt, weiß ich nicht ;-)
    </scnr>