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
<div class="AboutBox">
<h2>Background</h2>
<div class="AboutContent">
<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>
</div>
</div>
Bist Du Dir sicher, dass der eingeführte Blocksatz dafür verantwortlich ist?
Diese Zahlen sagen da was anderes:
.AboutBox
{
width: 380px;
...
}
.AboutContent
{
width: 386px;
...
border: #D1AA31 1px solid;
padding: 10px 5px 0px 5px;
}… 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 + 21px + 25px = 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.
