1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

[ERLEDIGT] Blocksatz verändert die div breite

Dieses Thema im Forum "CSS" wurde erstellt von Lycia, 8 Januar 2017.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Lycia

    Lycia Neues Mitglied

    Registriert seit:
    20 Dezember 2016
    Beiträge:
    4
    Punkte für Erfolge:
    1
    Hallo, ich habe eine Div-Box mit Textinhalt. Jetzt wollte ich es verschönern, indem ich den Text als Blocksatz setzte. Dafür benutzte ich "text-align:justify;"

    Leider sorgt der Blocksatz dafür, dass die DivBox ihre Breite nicht einhält und so drei about-boxen nebeneinander geflotet nicht mehr auf die Breite der Seite passen wie zuvor (1200px).

    Wie kann ich das fixen?

    Grüße
    Lycia


    Code (html5):
    1. <div class="AboutBox">
    2.                    <h2>Background</h2>
    3.                        <div class="AboutContent">
    4.                        <p>We are a small group of amateur developers. In our free time we develop games and useful programmes. Our motivation is to make others with the apps happy or the daily life easier.</p>
    5.                        </div>
    6.                </div>
    Code (CSS):
    1. .AboutBox
    2. {
    3.    width: 380px;
    4.    margin: 5px;
    5.    float: left;
    6. }
    7. .AboutContent
    8. {
    9.    width: 386px;
    10.    height: 130px;
    11.    background: #FFF3B5;
    12.    border: #D1AA31 1px solid;
    13.    padding: 10px 5px 0px 5px;
    14.    text-align:justify;
    15. }
     
    Zuletzt von einem Moderator bearbeitet: 8 Januar 2017
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.561
    Punkte für Erfolge:
    83
    Bist Du Dir sicher, dass der eingeführte Blocksatz dafür verantwortlich ist?

    Diese Zahlen sagen da was anderes:
    Code (CSS):
    1. .AboutBox
    2. {
    3.    width: 380px;
    4.    ...
    5. }
    6. .AboutContent
    7. {
    8.    width: 386px;
    9.    ...
    10.    border: #D1AA31 1px solid;
    11.    padding: 10px 5px 0px 5px;
    12. }
    ... und hätte Dir eigentlich auffallen müssen, dass hier schon alleine die width-Regel für das Kindelement .AboutContent gegenüber dem Elternelement nicht größer ausfallen kann, ohne Probleme zu bereiten.

    Die tatsächliche (Gesamt)Breite von .AboutContent beträgt gemäß dem Box-Modell aber 386px + 2*1px + 2*5px = 398px!!!

    Und wie Du das nun fixen kannst?

    Einfach die prekäre width-Regel weglassen, weil ein Blockelement grundsätzlich (ohne spezielle CSS-Formatierung) automatisch die verfügbare Breite seines Elternelements einnimmt: https://jsfiddle.net/SpiceLab/nfjtwkro/

    Ansonsten den Wert korrigieren, damit die Summe von Breite, Rahmen (links/rechts) u. Innenabstand (links/rechts) nicht größer als 380px ausfällt.

    Abschließend mein Pro Tipp: Nutze das zeitgemäße CSS3-Flexbox-Modell anstelle von Floats!
     
  3. Lycia

    Lycia Neues Mitglied

    Registriert seit:
    20 Dezember 2016
    Beiträge:
    4
    Punkte für Erfolge:
    1
    Oh man was für ein dummer Fehler. Danke dir. vielleicht lernen ja andere daraus :D
     
  4. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.561
    Punkte für Erfolge:
    83
    Unter anderem, einen produzierten Zahlendreher (386 vs 368) bemerken/erkennen :cool:
     
Status des Themas:
Es sind keine weiteren Antworten möglich.