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

  • StefanM_
    hat ein Thema erstellt [Erledigt] Mehrere divs floaten - Umbruch verhindern.

    [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

  • nikosch
    antwortet
    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.

    Einen Kommentar schreiben:


  • StefanM_
    antwortet
    Danke euch beiden Passt nun!

    Einen Kommentar schreiben:


  • SylarBo
    antwortet
    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.

    Einen Kommentar schreiben:


  • rkr
    antwortet
    box-sizing: border-box

    Einen Kommentar schreiben:


  • StefanM_
    antwortet
    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?

    Einen Kommentar schreiben:


  • SylarBo
    antwortet
    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).

    Einen Kommentar schreiben:


  • StefanM_
    antwortet
    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.

    Einen Kommentar schreiben:


  • rkr
    antwortet
    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..

    Einen Kommentar schreiben:


  • SylarBo
    antwortet
    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"%" ..

    Einen Kommentar schreiben:

Lädt...
X