Den Aufwand, es zu verstehen und sich einzuarbeiten, investiert man besser nicht in ein Layout mit float sondern etwas, das klar, verständlich, geradlinig und der neueste Stand der Technik ist: Flexbox.
Werde ich mir auch auf jeden Fall mal anschauen.....Jedenfalls Vielen Dank für die Hilfe, ihr habt mir echt weitergeholfen!
Das liegt am float: Wenn Du ein Element floatest, wird im Eltern-Container kein Platz mehr dafür reserviert. Daher liegt in deinem Fall das gefloatete Element außerhalb seines Beitragscontainers und überdeckt den folgenden Beitragscontainer. Das ist eine sehr unangenehme Eigenschaft des floating und ein Grund, warum ich und andere auch davon abraten.
Ahhhhh! Da lag der Fehler! 
Vielen Dank, jetzt funktioniert auch alles. Alles was rechtsbündig sein sollte habe ich jetzt einfach durch text-align: right ersetzt. Damit scheint es auch zu funktionieren.
Versuch erstmal was wir sagten .Eigentlich sollte das dann auch gehen .Nur warum brauchst du height:130px;
Wenn ich deine Seite so sehe ,haben alle beitrags container feste grössen .Dann brauch man eigentlich keine angaben über 100%. Oder vieleicht doch ,weiß ja nicht was du vor hast
Das ist ja das komische. Wenn ich beispielweise 100% height nehmen würde, dann macht er einen Margin wieder mitten im Text (siehe Foto):
html-seminar.de/woltlab/attachment/1396/
Irgendetwas stimmt da mit der Klasse Beitrag nicht.
Und ich verstehe leider immer noch nicht warum bei einer height von 130% alles so aussieht:
[Blockierte Grafik: https://picload.org/view/darlwori/bild1.png.html]
Und wenn ich die height entferne so:
[Blockierte Grafik: https://picload.org/view/darlwoda/bild2.png.html]
die height müsste doch trotzdem automatisch bis zum ende des Beitrages gehen, oder?
Kuckste https://jsfiddle.net/basti1012/5s3x5f0j/24/ fehler sind weg. Aber mache den rest gerade auch noch richtig
Das sieht bei mir aber ziemlich komisch aus...Jedenfalls nicht wie hier http://niklasnaturblog.de/. Soll das so? Oder wird das nur falsch angezeigt?
Okay Vielen Dank! Ich werde alles jetzt mal ausprobieren und korrigieren und schreibe später nochmal.
Ja in etwa! Hier mal ein Beispiel:
Ich habe z.B. 2 verschieden Beiträge im HTML Quellcode (hier ohne Inhalt):
<div class="Beitrag">
<img class="headpicture"/>
<div class="Überschrift"></div>
<div class="Kurztext">
<br>
<br>
<hr></div>
<div class="Untertext"></div>
<div class="Unterschrift"></div>
<br>
<br>
</div>
<div class="Beitrag">
<img class="headpicture"/>
<div class="Überschrift"></div>
<div class="Kurztext">
<br>
<br>
<hr></div>
<div class="Untertext"></div>
<div class="Unterschrift"></div>
<br>
<br>
</div>So der CSS-Eintrag für die Klasse .Beitrag sieht folgendermaßen aus:
.Beitrag {
max-width: 50%;
background-color: white;
margin: 20px auto;
display: block;
}Logischerweise müsste ja nun ein Abstand von 20px zwischen den beiden Beiträgen kommen , oder? Der Abstand ensteht jedoch zwischen der Klasse .headpicture und .Kurztext. Bei einem Klick auf "untersuchen" bei Google Chrome wird mir angezeigt das die .Beitrag Klasse aus dem Text vom ersten Beitrag und dem Bild aus dem zweiten Beitrag besteht. Wie kann das sein? Die Div-Klasse ist doch klar abgegrenzt.
Also soweit sieht alles gut aus. Das einzige Problem sind die Beiträge. Sobald ich bei der .Beitrag Klasse height wegnehme bzw. es keine Vorgabe für die Höhe mehr gibt, ist eine Beitrag Klasse immer der untere Text eines Beitrages und das "headpciture" des darauffolgendem Beitrages. Da ich einen Margin haben möchte ist dieser jetzt immer zwischen Bild und zugehörigen Text. Eine Beitrag Klasse soll immer das ".headpciture", der ".kurztext" und die ".unterschrift" sein.
Die !aktuellen! index und Stylesheet dateien habe ich mal hier angehängt.
Interesante frage. Wenn ich daraus eine fiddle mache verschiebt sich nix ineinander. Ich würde auf die bootstram einbindungen tippen weil die in der fiddle nicht bei wahren.Aber sicher bin ich mir da auch noch nicht .Ich probiere weiter
Danke für deine Antwort! Ich werde es mal ausprobieren.
Ohne mir das näher anzuschauen, kann ich schon mal Folgendes sagen:
Die Breite gibst du am besten in Prozent an und die Höhe lässt du ganz weg.
Des Weiteren sehe ich nicht, warum du in diesem Fall absolute Positionierung nutzen solltest. Das kann also höchstwahrscheinlich auch weg.
Bei margin hast du einen kleinen Fehler. Es soll wahrscheinlich 20px, nicht nur 20, heißen.
Danke erstmal! Leider klappt das mit der Höhe noch nicht so ganz. Sobald ich sie weg lasse, wird nur noch das "headpicture" als Klasse ".Beitrag" gesehen. und er macht um das Bild einen Margin von 20px.
Hallo Forum!
Ich benötige Hilfe bei meiner Webseite niklasnaturblog.de. Um die Seite für Mobilgeräte zu optimieren, versuche ich momentan denn Quellcode anzupassen. Navbar, Überschrift und Banner passen sich schon mal an, aber die "Beiträge" weiter unten schieben sich ineinander und nebeneinander. Hat jemand eine Idee oder einen Vorschlag was ich versuchen könnte, um dies zu verhindern? Im Stylesheet sieht die Klasse für die einzelnen Beiträge momentan so aus:
.Beitrag {
width: 1020px;
height: 125%;
max-width: 90vw;
background-color: white;
margin: 20 auto;
display: block;
position: absoloute;
}width und height sind wahrscheinlich die Hauptprobleme, da diese Werte bisher nur für meinen Bildschirm ausgelegt sind.
Ich hoffe ihr könnt mir weiterhelfen!