Tutorials

Tutorial: How to Fix Width (CSS & Webdesign)

Melden

Das Thema "Width" (Breite) ist eines der häufigsten Probleme im Webdesign und der Softwareentwicklung. Meistens geht es darum, dass Elemente entweder zu breit sind (Overflow), nicht die volle Breite einnehmen oder sich nicht responsiv verhalten.

Hier ist ein umfassendes Tutorial, wie du Breiten-Probleme in CSS löst.

1. Das wichtigste Werkzeug: box-sizing

Das häufigste Problem ist, dass Padding (Innenabstand) oder Border (Rahmen) zu der Breite eines Elements addiert werden. Wenn du width: 100% und padding: 20px hast, ist das Element eigentlich 100% + 40px breit und sprengt das Layout.

Die Lösung: Setze den box-sizing Standard für alle Elemente auf border-box.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Warum das hilft: Nun bedeutet width: 100%, dass das Element inklusive Padding und Border exakt 100% breit ist.

2. Problem: Das Element sprengt den Bildschirm (Horizontal Overflow)

Wenn deine Website auf dem Handy seitlich wackelt, hast du einen "Horizontal Scroll".

Die Lösung: max-width statt width Verwende niemals feste Breiten wie width: 1200px; für Container, ohne eine Alternative für kleinere Bildschirme zu bieten.

.container {
  /* Schlecht: */
  /* width: 1200px; */

  /* Gut: */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /* Zentriert den Container */
}

3. Problem: Bilder sprengen das Layout

Bilder haben oft eine feste Originalgröße. Wenn das Bild 2000px breit ist, wird es den Container sprengen.

Die Lösung: Mache Bilder responsiv.

img {
  max-width: 100%;
  height: auto;
  display: block;
}

4. Problem: Flexbox-Elemente werden zu schmal oder zu breit

In einer Flex-Box (display: flex) versuchen Elemente oft, sich in eine Zeile zu quetschen, auch wenn sie keinen Platz haben.

Die Lösung: Verwende flex-wrap oder definiere die Basis-Breite.

.parent {
  display: flex;
  flex-wrap: wrap; /* Erlaubt Umbruch auf die nächste Zeile */
}

.child {
  flex: 1 1 300px; /* Wachsen, Schrumpfen, Basisbreite 300px */
}

5. Problem: Lange Wörter oder URLs zerstören die Breite

Manchmal ist ein Wort (oder ein Link) so lang, dass es den Container nach außen drückt.

Die Lösung: Erzwinge einen Zeilenumbruch.

.text-container {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all; /* Wenn nötig, bricht das Wort mitten im Buchstaben */
}

6. Der "Quick Fix" für hartnäckige Fälle

Wenn du absolut nicht findest, welches Element die Breite sprengt, hilft dieser CSS-Trick, um das Problem-Element visuell zu finden:

/* Zeichnet eine rote Linie um jedes Element auf der Seite */
* {
  outline: 1px solid red !important;
}

Wenn du nun scrollst, siehst du sofort, welcher rote Kasten über den Rand hinausragt.

Zusammenfassung: Checkliste zum Fixen der Breite

  1. Box-Sizing: Hast du box-sizing: border-box gesetzt?
  2. Max-Width: Nutzt du max-width: 100% für Container und Bilder?
  3. Overflow: Hast du overflow-x: hidden auf dem body (nur als Notlösung!) oder suchst du das Element, das rausschaut?
  4. Padding/Margin: Hast du ungewollte Außenabstände, die das Element pushen?
  5. Viewport-Meta-Tag: Hast du diesen Tag im <head> deiner HTML-Datei? (Essentiell für Mobile): <meta name="viewport" content="width=device-width, initial-scale=1.0">

Hast du ein spezifisches Programm im Kopf (z. B. Excel, Photoshop oder WordPress), für das du die Breiten-Korrektur benötigst? Dann gib mir kurz Bescheid!

0