Kalle_B: div mit display:inline

Hallöle,

ich brauche zwei Platzhalter mit fester Größe, die im Textfluss anzuzeigen sind. Beide sollen nebeneinander stehen und gemeinsam horizontal zentriert werden.

So stehen sie als Blockelemente untereinander:
  <div style='position:relative; width:370px; height:230px; border:1px solid #f00'>
    <p>Hier etwas Text</p>
  </div>
  <div style='position:relative; width:370px; height:230px; border:1px solid #f00'>
    <p>Hier etwas Text</p>
  </div>

Nun ergänze ich beide um display:inline, und sie kollabieren, verlieren vollkommen die Breite und Höhe.

Wie konstruiert man Platzhalter im Textfluss? Okay, zur Not mit einer transparenten Grafik. Aber wieso versagen die divs?

Kalle

  1. Hallo!

    Nun ergänze ich beide um display:inline, und sie kollabieren, verlieren vollkommen die Breite und Höhe.

    Weil inline Elemente keine Breite und Höhe haben.

    Wie konstruiert man Platzhalter im Textfluss? Okay, zur Not mit einer transparenten Grafik. Aber wieso versagen die divs?

    Indem Du sie floaten lässt.

    Schönen Gruß

    Afra

    1. Hallo!

      Indem Du sie floaten lässt.

      Dann klatschen sie links gegen den Rand. Naja, in einer weiteren div- Schachtel verpackt geht es dann wohl.

      Kalle

      1. Hallo!

        Dann klatschen sie links gegen den Rand.

        Für was gibt es margin?

        Schönen Gruß

        Afra

        1. hi,

          Dann klatschen sie links gegen den Rand.

          Für was gibt es margin?

          Dann bleibt neben ihnen freier Platz - aber sie sollen direkt im Fliesstext stehen.

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
          1. Hallo!

            Dann bleibt neben ihnen freier Platz - aber sie sollen direkt im Fliesstext stehen.

            Huch, ich hab da gepennt.

            Schönen Gruß

  2. hi,

    Nun ergänze ich beide um display:inline, und sie kollabieren, verlieren vollkommen die Breite und Höhe.

    Natürlich, muss ja - da _dürfen_ width und height keine Wirkung haben.

    Wie konstruiert man Platzhalter im Textfluss?

    display:inline-block

    (Ich weiss nicht, ob der Firefox das inzwischen mal halbwegs vernünftig unterstützt - er hatte lange Zeit Probleme damit. Opera macht's jedenfalls schon seit Ewigkeiten Problemlos, und der IE - wenn man ihn nicht im Quirks Mode hat, wo er ignoriert, dass der width und height in so einer Konstellation zu ignorieren hätte - kann's mit einem kleinen Hack auch [hab ich garde nicht parat - irgendwas mit zwei separaten Regeln im CSS, woe man display erst auf einen, und dann wieder auf einen anderen Wert setzen muss]).

    Aber wieso versagen die divs?

    S.o., weil wegen muss so sein, per Definition.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }