Andi: Breite eines DIVs

Hallo!

Ich habe folgendes Layout:

<div style="width:500px">
  <div style="width:20px">...</div>
  <div style="width:20px">...</div>
  <div style="width:20px">...</div>

Hier möchte ich gerne ein DIV, dass automatisch bis zum rechten Rand des übergeordneten DIV (500px) geht.

</div>

width:auto geht nicht, was kann ich da machen?

Gruß,
Andi

  1. Hallo Andi.

    Ich habe folgendes Layout:

    <div style="width:500px">
      <div style="width:20px">...</div>
      <div style="width:20px">...</div>
      <div style="width:20px">...</div>

    Was steht normalerweise an Stelle von „...“?

    Hier möchte ich gerne ein DIV, dass automatisch bis zum rechten Rand des übergeordneten DIV (500px) geht.

    </div>

    width:auto geht nicht, was kann ich da machen?

    Du willst, dass das Listenelement die gesamte Breite, also 100% davon einnimt.

    Einen schönen Dienstag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
    1. Hallo Ashura

      Hallo Andi.

      Ich habe folgendes Layout:

      <div style="width:500px">
        <div style="width:20px">...</div>
        <div style="width:20px">...</div>
        <div style="width:20px">...</div>

      Was steht normalerweise an Stelle von „...“?

      'n bißchen Text.

      Hier möchte ich gerne ein DIV, dass automatisch bis zum rechten Rand des übergeordneten DIV (500px) geht.

      </div>

      width:auto geht nicht, was kann ich da machen?

      Du willst, dass das Listenelement die gesamte Breite, also 100% davon einnimt.

      Wenn ich width:100% verwende, ist es 500px breit. Es soll aber nur die verbeibende Fläche ausgefüllt werden.

      Einen schönen Dienstag noch.

      Gruß, Ashura

      Gruß,
      Andi

      1. Hallo Andi.

        Ich habe folgendes Layout:

        <div style="width:500px">
          <div style="width:20px">...</div>
          <div style="width:20px">...</div>
          <div style="width:20px">...</div>

        Was steht normalerweise an Stelle von „...“?

        'n bißchen Text.

        ’n bisschen ausführlicher wäre gut. Ich vermute nämlich, dass du hier eigentlich eine http://de.selfhtml.org/html/text/listen.htm@title=Liste verwenden möchtest.

        Hier möchte ich gerne ein DIV, dass automatisch bis zum rechten Rand des übergeordneten DIV (500px) geht.
        […]

        Wenn ich width:100% verwende, ist es 500px breit. Es soll aber nur die verbeibende Fläche ausgefüllt werden.

        Kann ich nicht nachvollziehen. Die Kindelemente des umspannenden div–Elementes nehmen an sich schon die ganze Breite ein, da dies eine Eigenschaft von Blockelementen ist, die sie nun einmal sind. Ein width:100% ändert hieran eigentlich nichts, hätte aber in deinem Fall erforderlich sein können.

        Einen schönen Dienstag noch.

        Gruß, Ashura

        --
        sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
        „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
        [HTML Design Constraints: Logical Markup]
        1. Hallo Ashura,

          Wenn ich width:100% verwende, ist es 500px breit. Es soll aber nur die verbeibende Fläche ausgefüllt werden.
          Kann ich nicht nachvollziehen. Die Kindelemente des umspannenden div–Elementes nehmen an sich schon die ganze Breite ein, da dies eine Eigenschaft von Blockelementen ist, die sie nun einmal sind.

          ist es nicht eher so, dass ein Blockelement, also z.B. ein div, mit width:100% eben stur 100% der Breite des Elternelements einnimmt und somit, falls es sich die Breite mit anderen teilen muss, aus dem Elternelement herausragt? Und dass das Weglassen der width-Eigenschaft hier sinnvoller wäre? Oder habe ich hier die Grundlagen gründlich missverstanden?

          Ein width:100% ändert hieran eigentlich nichts, hätte aber in deinem Fall erforderlich sein können.

          Nach meinem Verständnis wäre eher width:auto angebracht, was aber dem Weglassen entspräche (warum Andi meint, das "geht nicht", ist mir nicht ganz klar).

          Schönen Abend noch,
           Martin

          --
          Computer funktionieren grundsätzlich nicht richtig.
          Wenn doch, hast du etwas falsch gemacht.
          1. Hallo Martin.

            ist es nicht eher so, dass ein Blockelement, also z.B. ein div, mit width:100% eben stur 100% der Breite des Elternelements einnimmt und somit, falls es sich die Breite mit anderen teilen muss, aus dem Elternelement herausragt?

            Nein, dem ist nicht so.

            Und dass das Weglassen der width-Eigenschaft hier sinnvoller wäre? Oder habe ich hier die Grundlagen gründlich missverstanden?

            Hier in diesem Falle ist width:100% == width:auto, weil Blockelemente nun einmal die Eigenschaft haben, die gesamte zur Verfügung stehende Breite einzunehmen. Und das sind eben 100% davon.

            Einen schönen Mittwoch noch.

            Gruß, Ashura

            --
            sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
            „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
            [HTML Design Constraints: Logical Markup]
            1. Hallo Martin.

              ist es nicht eher so, dass ein Blockelement, also z.B. ein div, mit width:100% eben stur 100% der Breite des Elternelements einnimmt und somit, falls es sich die Breite mit anderen teilen muss, aus dem Elternelement herausragt?

              Nein, dem ist nicht so.

              Und dass das Weglassen der width-Eigenschaft hier sinnvoller wäre? Oder habe ich hier die Grundlagen gründlich missverstanden?

              Hier in diesem Falle ist width:100% == width:auto, weil Blockelemente nun einmal die Eigenschaft haben, die gesamte zur Verfügung stehende Breite einzunehmen. Und das sind eben 100% davon.

              Also, ich habs auprobiert: 100% sind 500px also die VOLLE breite des Elternelements. Wenn ich es weglasse (oder auto) hat das Ding gerade mal ca. 10px. Warum auch immer.
              Uns warum ich eine Liste haben möchte, weiß ich auch noch nicht so ganz.

              Einen schönen Mittwoch noch.

              Gruß, Ashura

              Gruß
              Andi

          2. Hi,

            ist es nicht eher so, dass ein Blockelement, also z.B. ein div, mit width:100% eben stur 100% der Breite des Elternelements einnimmt

            Nicht ganz, Prozentwerte bei width beziehen sich auf den containing block - in der Regel ist das das Elternelement.

            und somit, falls es sich die Breite mit anderen teilen muss,

            Es wurde aber kein Umstand genannt, der dazu führen würde, daß es sich die Breite mit etwas anderem teilen müßte.

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Schreinerei Waechter
            O o ostern ...
            Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  2. Hallo Andi,

    Hier möchte ich gerne ein DIV, dass automatisch bis zum rechten Rand des übergeordneten DIV (500px) geht.

    width:auto geht nicht, was kann ich da machen?

    Möchtest du es vielleicht nach rechts fließen lassen?

    Gruß Gernot