temp: div box

SELF-Forum

div box

temp
– Informationen zu den Bewertungsregeln

Hi all,

ich habe 2 div-boxen ineinander und die innere soll in der gesamt breite genau so breit sein wie die, in der sie liegt jedoch mit einem margin von einer bestimmt px anzahl;

praktisch sowas: width: 100% - margin(in px)

Kennt jemand eine einfache Lösung?

Gruß,
Julian

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. div box

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich habe 2 div-boxen ineinander und die innere soll in der gesamt breite genau so breit sein wie die, in der sie liegt jedoch mit einem margin von einer bestimmt px anzahl;

    und wo liegt da das Problem?

    praktisch sowas: width: 100% - margin(in px)

    Nein.

    Kennt jemand eine einfache Lösung?

    Ein div ist ein Blockelement. Blockelemente nehmen per Default die gesamte verfügbare Breite ein. Lass also die width-Angabe komplett weg und gib nur margin für das innere (oder padding für das äußere) div an. Fertig.

    Ciao,
     Martin

    --
    Jungs sind wie Waschmaschinen: Wenn man sie anmacht, kommen sie ins Schleudern.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. div box

      keks
      – Informationen zu den Bewertungsregeln

      wenn ich das mache, dann verschiebt sich die äußsere box um den oberen margin nach untern und die inner ist 100% breit aber nicht hoch: c.f abgetrennter bereich

      <html>  
  
    <head>  
        <title>project</title>  
        <link rel="stylesheet" type="text/css"  href="indexstyle.css">  
    </head>  
  
    <body>  
        <div id="base">  
            <div class="dividiv" style="float:left;">  
  
  
                <div class="maxdiv">  
                    <div class="indiv">  
                    </div>  
                </div>  
  
  
                <div class="maxdiv">  
                </div>  
            </div>  
            <div class="dividiv" style="float:right;">  
                <div class="largediv">  
                </div>  
                <div class="smalldiv" style="float:left;">  
                </div>  
                <div class="smalldiv" style="float:right;">  
                </div>  
                <div class="smalldiv" style="float:left;">  
                </div>  
                <div class="mindiv" style="float:right;">  
                </div>  
                <div class="mindiv" style="float:right;">  
                </div>  
            </div>  
        </div>  
    </body>  
</html>

        
  
#base{  
    height:95%;  
    width:90%;  
    background-color:black;  
    margin:0 auto;  
  
}  
  
.maxdiv{  
    height:50%;  
    width:100%;  
    background-color:blue;  
}  
  
.largediv{  
    height:33.33%;  
    width:100%;  
    background-color:red;  
}  
.smalldiv{  
    height:33.33%;  
    width:50%;  
    background-color:grey;  
}  
.mindiv{  
    height:16.66%;  
    width:50%;  
    background-color:yellow;  
}  
.indiv{  
    margin:10px;  
    background-color:red;  
}  
.dividiv{  
    height:100%;  
    width:50%;  
    background-color:green;  
  
  
}
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. div box

        Malcolm Beck´s Homepage des Autors
        – Informationen zu den Bewertungsregeln

        હેલો

        wenn ich das mache, dann verschiebt sich die äußsere box um den oberen margin nach untern und die inner ist 100% breit aber nicht hoch: c.f abgetrennter bereich

        Kann man anhand der geposteten Schnippsel nicht wirklich nachvollziehen.

        http://jsfiddle.net/NBCcS/

        બાય

        --
         .
        ..:
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. div box

          keks
          – Informationen zu den Bewertungsregeln 
          <html>  
  
    <head>  
        <title>project</title>  
        <link rel="stylesheet" type="text/css"  href="indexstyle.css">  
    </head>  
  
    <body>  
        <div id="base">  
            <div class="dividiv" style="float:left;">  
                <div class="maxdiv">  
                    <div class="indiv">  
                    </div>  
                </div>  
                <div class="maxdiv">  
                </div>  
            </div>  
            <div class="dividiv" style="float:right;">  
                <div class="largediv">  
                </div>  
                <div class="smalldiv" style="float:left;">  
                </div>  
                <div class="smalldiv" style="float:right;">  
                </div>  
                <div class="smalldiv" style="float:left;">  
                </div>  
                <div class="mindiv" style="float:right;">  
                </div>  
                <div class="mindiv" style="float:right;">  
                </div>  
            </div>  
        </div>  
    </body>  
</html>
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. div box

            keks
            – Informationen zu den Bewertungsregeln

            http://jsfiddle.net/5EtTx/
            oder so das result ist aber merkwürdig ?

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. div box

              molily Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hallo!

              http://jsfiddle.net/5EtTx/
              oder so das result ist aber merkwürdig ?

              Aus dem Beispiel werde ich nicht schlau. Die meisten Elemente sind leer und haben daher eine Höhe von 0.

              Ein *reduziertes* Beispiel, das mit echten Inhalten arbeitet, wäre hilfreich.

              Das, was ich sehe, ließe sich auch mit diesem minimalen Beispiel umsetzen:

              <div style="float:left; background-color: green"><div style="margin: 10px"></div></div>

              Hier wird eine grüne Box der Höhe 10px angezeigt, da die margin des inneren Elements das floatende Element nicht nach oben überragt. Das war aber nicht deine Frage, oder?

              Mathias

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. div box

                gimli
                – Informationen zu den Bewertungsregeln

                Kannst du mal deinen konkreten Verwendungszweck und das Ziel nennen, bzw. deine Wunschvorstellung. Dann kann man sich da leichter reindenken und abwägen was man überhaupt benötigt für deinen Einsatzgrund.

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

      2. div box

        Der Martin
        – Informationen zu den Bewertungsregeln

        Hi,

        wenn ich das mache, dann verschiebt sich die äußsere box um den oberen margin nach untern und die inner ist 100% breit aber nicht hoch: c.f abgetrennter bereich

        was ist "c.f"?

        [Code]

        Ach du liebe Güte. Da kommt ja wirklich alles zusammen, was es an Gemeinheiten gibt. Von deiner Seite eine üble div-Suppe, inline-Styles, wenig aussagekräftige Bezeichner, dann aber auch Dinge wie Collapsing Margins, sämtliche Nebenwirkungen von float, unbestimmte Höhenangaben ... Wow.

        Ich glaube, da lohnt sich wirklich die Radikalkur: Einreißen und sauber neu aufbauen.

        Davon abgesehen: Bitte bleib bei einem einmal gewählten Nick.

        So long,
         Martin

        --
        Die Zeit, die man zur Fertigstellung eines Projekts wirklich braucht, ist immer mindestens doppelt so lang wie geplant.
        Wurde dieser Umstand bei der Planung bereits berücksichtigt, gilt das Prinzip der Rekursion.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln