Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Mehrere divs floaten - Umbruch verhindern

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Mehrere divs floaten - Umbruch verhindern

    Hallo,

    Ich habe folgendes Problem:

    Ich habe ein div in dem 3 weitere nebeneinander angeordnet sind. Ich möchte das div detail_head_status zu 100% füllen (breite), egal wie groß das Browserfenster ist. Ich habe also 3 divs mit 2x14%, 1x80% und 2 mal margin mit je 1%, in Summe also 100%. Die 3 Divs brechen aber im Browser um, so dass die ersten beiden nebeneinander, das dritte dann in einer neuen Zeile steht.

    Wie kann ich das verhindern?

    PHP-Code:
    <div id="detail_head_status">
    <
    div class="statusbar_small">balblablabla</div>
    <
    div id="statusbar_big">blablablbla</div>
    <
    div class="statusbar_small" id="favs">blablbla</div>
    </
    div
    PHP-Code:
    #detail_head_status{
        
    width100%;
        
    margin-bottom15px;
    }
    .
    statusbar_small
    {
        
    width14%;
        
    height110px;
        
    floatleft;
        
    padding10px;
        
    background-colorrgba(246,246,246,0.7);    
        
    box-shadow1px 1px 1px 1px rgba(216,216,216,1);
        
    text-aligncenter;
    }
    #statusbar_big
    {
        
    height110px;
        
    floatleft;
        
    width80%;
        
    margin0101%;
        
    padding10px;
        
    background-colorrgba(246,246,246,0.7);    
        
    box-shadow1px 1px 1px 1px rgba(216,216,216,1);
    }
    .
    favs{
        
    clearboth;

    Vielen Dank,
    Stefan


  • #2
    Ich glaube ich hab da ein Verständnisproblem
    2x14%, 1x80% und 2 mal margin mit je 1%, in Summe also 100%.
    Ich komme dann auf eine andere Breite > 100% ...

    Edit:
    Es kann auch sein, dass ich komplett falsch liege aber:
    14%+14%+80%+(1% margin-right + 1%margin-left) = 110"%" ..

    Kommentar


    • #3
      Zitat von StefanM_ Beitrag anzeigen
      Ich habe also 3 divs mit 2x14%, 1x80% und 2 mal margin mit je 1%, in Summe also 100%
      Du brauchst dringend einen neuen Taschenrechner..
      Standards - Best Practices - AwesomePHP - Guideline für WebApps

      Kommentar


      • #4
        Hi!

        Sorry, war nur ein Fehler beim zusammenkopieren
        Als ich hab 2x14%, 1x70%, 2x1%. Mein Taschenrechner sagt, das sind 100%

        Das Ergebnis passt trotzdem nicht!

        Wenn ich das breitere Div im Block auf 59% reduziere, ist das Ergebnis wie gewünscht, ab 60% bricht der Block um.

        Kommentar


        • #5
          Ich meine mal irgendwo gelesen zu haben, dass auch der Innenabstand deine Container verändert. Also deine beiden:
          PHP-Code:
          padding10px
          Ich glaube wenn du die entfernst sollte deine 100% Rechnung aufgehen


          Edit:
          Also meiner Rechnung nach hast du nun:
          14%+14%+80%+(1% margin-right + 1%margin-left) + 4x10px + 2x10px = 110"%"+60px ...

          Wenn ich mich da jetzt nicht vertue Also alle deine 3 Container vergrößern sich in alle Richtungen um 10px. Bei dir ist die Breite relevant, also 3(divs) x 20px(links und recht).

          Kommentar


          • #6
            Hi SylarBo!

            Das ist tatsächlich so Danke!
            Aber wie kommt ich jetzt zu meinem Padding? Die 10px haben optisch schon Sinn gemacht! Gibts dazu noch irgendeinen Trick?

            Kommentar


            • #7
              box-sizing: border-box
              Standards - Best Practices - AwesomePHP - Guideline für WebApps

              Kommentar


              • #8
                Ich kenne mich nun nicht ganz so gut mit dem Gestalten über CSS aus, aber ich glaube ich würde das "fest eingeplante Padding" in der Breite berücksichtigen. Also die Breite deiner Container jeweils um 2% verringern und das Padding deiner Container jeweils um 1%(! da ja links und rechts zählt) erhöhen.

                So kommst du immer noch auf die 100%

                Wenn dir 1% zu viel ist beim padding kannst du glaube ich auch mit 0.5% oder anderen Werten<1 arbeiten.

                Edit: Aber jetzt wo ich den Beitrag von rkr lese (mit einem Klick auf das erste Suchergebnis), gefällt mir seine Lösung besser.

                Kommentar


                • #9
                  Danke euch beiden Passt nun!

                  Kommentar


                  • #10
                    Für ältere Browser könntest Du auch einen Hilfscontainer einziehen, der nur das Padding (mit margin oder padding) abbildet. Hat den Vorteil gegenüber der letzten Lösung, dass Du pixelgenaue Paddings erreichen kannst, statt vom Viewport abhängige.
                    --

                    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                    --

                    Kommentar

                    Lädt...
                    X