• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Blocksatz verändert die div breite

Status
Für weitere Antworten geschlossen.
L

Lycia

Neues Mitglied
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


HTML: 
<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>

CSS: 
.AboutBox
{
   width: 380px;
   margin: 5px;
   float: left;
}
.AboutContent
{
   width: 386px;
   height: 130px;
   background: #FFF3B5;
   border: #D1AA31 1px solid;
   padding: 10px 5px 0px 5px;
   text-align:justify;
}
 
Zuletzt bearbeitet von einem Moderator:
Lycia schrieb:
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?
Zum Vergrößern anklicken....
Bist Du Dir sicher, dass der eingeführte Blocksatz dafür verantwortlich ist?

Diese Zahlen sagen da was anderes:
CSS: 
.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 + 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!
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben