Ösi-Rainer: Größe von <div> ohne width

SELF-Forum

Größe von <div> ohne width

Ösi-Rainer
– Informationen zu den Bewertungsregeln

Hallo

Wenn ich bei einem <div>-Container das width:300px weglasse, wird der Container so breit wie die gesamte Seite. Was muss ich angeben, dass der Container genauso breit ist, wie sein Inhalt?
(Das gleiche Problem habe ich auch bei <p> oder <h1> mit dem Attribut border)

Viele Grüße
Ösi-Rainer

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Größe von <div> ohne width

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Wenn ich bei einem <div>-Container das width:300px weglasse, wird der Container so breit wie die gesamte Seite.

    natürlich, er ist ja auch ein block level element.

    Was muss ich angeben, dass der Container genauso breit ist, wie sein Inhalt?

    verwende ein inline element stattdessen, z.b. <span>.

    (Das gleiche Problem habe ich auch bei <p> oder <h1> mit dem Attribut border)

    oder formatiere ein block level element über CSS so, dass es als inline element angezeigt wird; hierzu dient die eigenschaft display.

    gruss,
    wahsaga

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Größe von <div> ohne width

      Ösi-Rainer
      – Informationen zu den Bewertungsregeln

      Hallo!

      Danke Wahsaga, mit display:inline; funktioniert es. Allerdings stimmt der Abstand zu Elementen (Text, Überschriften) unterhalb des mit display:inline; formatierten Elements nicht mehr (er wird stark verkürzt). Woran liegt das?

      Gruß
      Ösi-Rainer

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Größe von <div> ohne width

        ecklvo
        – Informationen zu den Bewertungsregeln

        Allerdings stimmt der Abstand zu Elementen (Text, Überschriften) unterhalb des mit display:inline; formatierten Elements nicht mehr (er wird stark verkürzt). Woran liegt das?

        weil es dann eben ein inline-Element ist. Überschriften haben von grundsätzlich einen Abstand zu allen anderen Elementen im Browser. Mit display:inline fällt dieser Weg.
        Man kann ihn durch padding (Problem bei IE5.X zu IE6) und margin allerdings wieder hinzufügen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Größe von <div> ohne width

          wahsaga Homepage des Autors
          – Informationen zu den Bewertungsregeln

          hi,

          weil es dann eben ein inline-Element ist. Überschriften haben von grundsätzlich einen Abstand zu allen anderen Elementen im Browser. Mit display:inline fällt dieser Weg.
          Man kann ihn durch padding (Problem bei IE5.X zu IE6) und margin allerdings wieder hinzufügen

          nein, abstände nach oben/unten kannst du mit margin nicht mehr erzeugen, wenn du ein element zu einem inline element gemacht hast.

          http://www.w3.org/TR/CSS21/box.html#margin-properties:

          'margin-top', 'margin-bottom'
          Applies to:   all elements but inline, non-replaced elements and internal table elements

          gruss,
          wahsaga

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln