VerteX: Maximalbreite mit eingerechnetem Padding etc. angeben

Hallöle,

vor diesem Problem stand ich schonmal und ich habe auch schon einmal in irgendeinem Forum danach gefragt und eine Lösung bekommen, aber ich finde das Thema einfach nicht wieder.

Es geht darum, dass ich einen Bereich habe (ein DIV-Block in diesem Fall), der maximal 800px breit sein soll, also auch mit padding etc. niemals die 800px überschreiten soll. Mein Ansatz war folgendes:
<div style="width: auto; max-width: 800px; padding:20px;">Text</div>
aber das klappt irgendwie nicht.

Damals wurde mir dann gesagt, dass ich irgendwie das Boxmodel besonders ausnutzen und dadurch "austricksen" muss um das hinzubekommen.

  1. @@VerteX:

    nuqneH

    Es geht darum, dass ich einen Bereich habe (ein DIV-Block in diesem Fall), der maximal 800px breit sein soll, also auch mit padding etc. niemals die 800px überschreiten soll. Mein Ansatz war folgendes:
    <div style="width: auto; max-width: 800px; padding:20px;">Text</div>
    aber das klappt irgendwie nicht.

    Klappt nicht?

    Damals wurde mir dann gesagt, dass ich irgendwie das Boxmodel besonders ausnutzen

    Boxmodell http://de.selfhtml.org/css/formate/box_modell.htm@title=besonders?

    Die Ungleichung

    'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' ≤ 800px

    sollte sich doch lösen lassen.

    Dass 'margin-left', 'border-left-width', 'border-right-width' und 'margin-right' 0 sind und 'padding-left' und 'padding-right' auch bekannt, vereinfacht die Sache ungemein.

    und dadurch "austricksen" muss um das hinzubekommen.

    Für den einen sind Addition und Subtraktion Tricks, für den anderen die längste Lapalie der Welt.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Hi,

      Für den einen sind Addition und Subtraktion Tricks,

      It's not a Sony ...

      für den anderen die längste Lapalie der Welt.

      Meine Lappalie ist länger - um ein p ;-)

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    2. Die Ungleichung

      'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' ≤ 800px

      sollte sich doch lösen lassen.

      Egal was ich hier frage, ich werd irgendwie immer für dumm verkauft.
      Natürlich lässt sich diese äußerst anspruchsvolle Ungleichung lösen und ich habe diesen Lösungsweg auch schon des öfteren genutzt, aber das ist bei diesem Problem nicht die Lösung die mir damals vorgeschlagen wurde.

      Mit austricksen meinte ich nicht den o. g. mathematischen "Trick", sondern einen CSS-Hack im Sinne von Dustin Diaz' altbekanntem max-/min-height Hack für den IE6 (siehe hier).

      Und um auf ChrisB's Kommentar noch einmal zu sprechen zu kommen: Das war vor ca. 5 Jahren und ich habe es seitdem nicht mehr benötigt, deshalb musste es den vielen anderen Dingen, die ich mir in der Zeit merken musste, weichen.

      Aber ist dann auch egal.

      1. Hi,

        Egal was ich hier frage, ich werd irgendwie immer für dumm verkauft.

        „Produkt entsprach genau der Beschreibung - Top-Ebayer, gerne wieder!“

        SCNR ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
      2. Om nah hoo pez nyeetz, VerteX!

        Egal was ich hier frage, ich werd irgendwie immer für dumm verkauft.

        Ja, manche Postings sind hier etwas ironisch/spöttelnd aber dennoch a) meist auf eine liebenswerte, zum Schmunzeln anregende Art und b) inhaltlich hochwertig.

        Natürlich lässt sich diese äußerst anspruchsvolle Ungleichung lösen und ich habe diesen Lösungsweg auch schon des öfteren genutzt, aber das ist bei diesem Problem nicht die Lösung die mir damals vorgeschlagen wurde.

        Wenn also dein Problem noch nicht gelöst ist, müsstest du es etwas genauer beschreiben. Für den IE < 7* noch große Anstrengungen zu leisten, lohnt nur dann, wenn die Seite dadurch unbenutzbar wird.

        *Manche in diesem Forum würden die 7 durch eine 8 ersetzen.

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
      3. Hi VerteX!

        Natürlich lässt sich diese äußerst anspruchsvolle Ungleichung lösen und ich habe diesen Lösungsweg auch schon des öfteren genutzt, aber das ist bei diesem Problem nicht die Lösung die mir damals vorgeschlagen wurde.

        Warum nicht?

        Mit austricksen meinte ich nicht den o. g. mathematischen "Trick", sondern einen CSS-Hack […]

        Wofür? Du hast im Moment eine maximale Breite von 800px. Mit einem Padding nach links und recht ergibt das nach dem Boxmodell eine maximale Gesamtbreite des Elements von 840px. Nun von der maximalen Breite die 40px noch abzuziehen, sollte nicht die schwerste Aufgabe sein.
        Und genau das hatte dir Gunnar schon erklärt.

        Und wenn du dem IE 6 dann auch noch auf die Sprünge helfen möchtest, dann tu das einfach über den Star-HTML-Hack.

        MfG H☼psel

        --
        "It's amazing I won. I was running against peace, prosperity, and incumbency."
        George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
        Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
      4. @@VerteX:

        nuqneH

        Mit austricksen meinte ich nicht den o. g. mathematischen "Trick", sondern einen CSS-Hack

        Ah, du willst nicht wissen, welchen Wert du zuweisen musst, sondern wie du 'max-width: 42px' fïr IE < 7 angibst?

        im Sinne von Dustin Diaz' altbekanntem max-/min-height Hack für den IE6 (siehe hier).

        (1) Das ist nicht im Sinne, sondern eher unsinnig.

        Man sollte mit '!important' überlegt umgehen, sonst gibt es ungewollte Nebeneffekte.

        In dem Falle ist eine Extra-Regel für IE < 7 angebracht:

        selector { min-height: 500px }  
        * html selector { height: 500px }
        

        (2) Dort steht nichts von 'max-height'.

        Gib für IE < 7 doch eine feste Breite. Dass die Darstellung in Steinzeitbrowsern nicht ganz so chic ist wie in neuzeitlichen, wen stört’s?

        Wenn’s denn noch unbedingt sein muss, dann gehst du das mit JavaScript (als CSS-Expression) an: shrink-to-fit auslösen, berechnete Breite auslesen, mit maximal gewünschtem Wert vergleichen:

        * html div  
        {  
            float: left;  
            width: expression( [code lang=javascript](new Function('elem', 'elem.style.width = (Math.min(42, parseInt(elem.currentStyle.width)) + "px";'))(this)
        ~~~ );  
        } [/code]  
          
        Qapla'  
          
        PS: [42](http://de.wikipedia.org/wiki/42_%28Antwort%29) ist ein [metasyntaktischer Wert](http://de.wikipedia.org/wiki/Metasyntaktische_Variable).
        
        -- 
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
        (Mark Twain)
        
        1. Ah, du willst nicht wissen, welchen Wert du zuweisen musst, sondern wie du 'max-width: 42px' fïr IE < 7 angibst?

          Hi,

          das ist jetzt leider ganz von meinem eigentlichen Problem abgekommen, aber danke für die Mühe. Das Problem mit der max-widht im IE wäre ein bisschen einfacher gewesen als das, was mir jetzt gerade durch den Kopf geht.

          Aber bleiben wir mal eben bei dem Thema:
          Nach max-height für IE hatte ich auch schon gegoogelt (oder falls das jetzt wieder von einem aufs Korn genommen wird vielleicht besser in anderen Worten: ich hatte per Google das World Wide Web danach durchsucht ;-) ).
          Es hatte mich verwundert, wie viele Ergebnisse man über die CSS-Expressions bekommt. Davon hatte ich vorher nie etwas gelesen, und ich habe schon einige male nach max-height für IE gesucht. Da kamen bloß massig Ergebnisse über CSS-"Hacks" wie den von Diaz'.
          Seit wann gibt es denn die Variante mit Expressions? Vielleicht habe ich damals aber auch einfach mit anderen Stichwörtern gesucht.

          Und jetzt zurück zum eigentlichen Thema:
          Ich versuche noch einmal genauer zu beschreiben, was ich mir gedacht hatte und versuche das an meinem alten Projekt, wo ich das schonmal benutzt habe, zu erläutern.
          Wenn ich mich richtig erinnere hatte ich damals ein Zwei-Spalten-Layout, wobei die rechte Spalte eine feste Breite hatte und die linke variabel sein sollte, jedoch eine gewisse Größe nicht überschreiten durfte.
          Da hatte ich dann mit dem Padding das Problem, dass die linke Spalte die rechte überlappte, wenn sie bis zu ihrer Maximalbreite ausgefüllt war.

          Aber wenn ich da so überlege... im Grunde kommt man auch bei diesem Problem mit der mathematischen Lösung zum Ergebnis.
          Ich weiß jetzt gar nicht mehr wie ich das damals schlussendlich gelöst habe und wieso ich da überhaupt festhing?! :S
          Vielleicht hab ich mal wieder einfach irgendwelche Erinnerungen vermischt.

          Habe es nun also doch mit mathematischen Höchstleistungen gelöst und danke trotzdem!

          1. Hallo,

            Nach max-height für IE hatte ich auch schon gegoogelt (oder falls das jetzt wieder von einem aufs Korn genommen wird vielleicht besser in anderen Worten: ich hatte per Google das World Wide Web danach durchsucht ;-) ).

            seit 2004 ist "googeln" sogar ein vom Duden anerkanntes Wort im Deutschen.

            Seit wann gibt es denn die Variante mit Expressions?

            Mindestens seit IE5, vielleicht sogar schon beim 4er, da bin ich nicht sicher.

            So long,
             Martin

            --
            Soso, der Klügere gibt nach.
            Aber warum sollen sich immer nur die Dummen durchsetzen?  .oO(?)
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          2. Wie heißt es so schön? Heureka!

            Ich glaube mir ist mein Problem wieder eingefallen!
            Es handelte sich um Padding in Verbindung mit relativer Breite.
            Beispiel:
            Ich habe im <body> ein <div> mit Breite "100%". Dieser div-Block erstreckt sich also über die gesamte Breite des Bodys. Sobald ich dem div aber eine Padding-Eigenschaft zuweise, verbreitert sich das div um dieses Padding und ich erhalte unschöne Scrollbalken, da der div-Block nun aus dem Body herausragt.
            Also brauche ich eine Lösung, damit das div samt Padding 100% breit ist.

            Wahrscheinlich ist das wiedermal tierisch einfach und ich steh bloß wieder auf dem Schlauch.

            1. Om nah hoo pez nyeetz, VerteX!

              Box-Modell

              Matthias

              --
              http://www.billiger-im-urlaub.de/kreis_sw.gif
            2. @@VerteX:

              nuqneH

              Wahrscheinlich ist das wiedermal tierisch einfach

              Ja: keine Breite angeben (oder den Defaultwert "auto").

              und ich steh bloß wieder auf dem Schlauch.

              Gib nicht so an. ;-)

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. Ja: keine Breite angeben (oder den Defaultwert "auto").

                Nagut, dann werde ich es so machen müssen. Danke!

                und ich steh bloß wieder auf dem Schlauch.

                Gib nicht so an. ;-)

                Wer's sich erlauben kann :-P

  2. Hi,

    vor diesem Problem stand ich schonmal und ich habe auch schon einmal in irgendeinem Forum danach gefragt und eine Lösung bekommen, aber ich finde das Thema einfach nicht wieder.

    Na hoffentlich konntest du dir wenigstens merken, wie Hintern abputzen geht ...

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Überaus konstruktiv...