Abstand zum Rand wird in Absätzen mit Div-Container aufgehoben

Maike1976 · 9. Juni 2019

Hallo,

ich habe ein etwas merkwürdiges Darstellungsproblem bei meiner Website auf dem Smartphone (Android).

Auf der Website haben alle Texte einen Abstand zum Rand.

Wenn ich aber einen Div-Container einfüge (Bild mit Bildunterschrift), dann wird dieser Abstand im gesamten Absatz - vor und hinter dem Container - aufgehoben.

Dann klebt der Text am Rand.

Woran kann das liegen? Mit dem Schließen des Containers sollte doch wieder die Formatierung für den Absatz gelten.
Warum ist die dann weg?

Betroffen sind sowohl Fließtext als auch Überschriften.

Liebe Grüße Maike

[Blockierte Grafik: http://www.zierfischfreunde-warendorf.de/Screenshot_20190609-091842.jpg]

Sailor · 9. Juni 2019

Bitte nutze als Erstes mal den Validator.... https://validator.w3.org/nu/?d…chfreunde-warendorf.de%2F ... da sind ein paar (3) Fehler im Code, die du beseitigen solltest.

Dein Problem ist folgende Codezeile

<div style="width:25%;min-width:300px;margin:30px;float:right;">

Rechne mal nach... min-width + zweimal margin sind 360px. Bei kleinerer Bildschirmbreite ragt dann das div über den Bildschirmrand, was dann auch zur Folge hat, dass die Folgeelmente eben sich auch an den 360px orientieren und zu dem von dir bemängelten Verhalten führen.

Nebenbei.... Inline-Styles sollte man vermeiden, diese Formate gehören in das Stylesheet.

Mit 'float' zu arbeiten bringt meist mehr Probleme als Nutzen - schau dir doch mal CSS Flexbox an, ob du das Layout im Bereich Text + Bild nicht damit besser gestalten kannst?

Maike1976 · 1. Juli 2019

Hallo Sailor,

danke für die Antwort. Jetzt sieht alles aus, wie es soll.
Den Code habe ich validiert.

Flexbox schaue ich mir an, wenn ich einmal mehr Zeit habe. Aktuell muss das Homepage-Projekt sich aus Zeitmangel aber ganz weit hinten einordnen.

Maike

Abstand zum Rand wird in Absätzen mit Div-Container aufgehoben

Jetzt mitmachen!

Teilen

Tags