Responsive Alternative zu Table für mehrspaltiges Layout in einem Beitrag

Hallo an alle,

ich bin noch relativ neu, was Joomla und allgemein Websitegestaltung angeht. Ich arbeite aktuell an einer Überarbeitung einer bestehenden Seite. Erstes Ziel ist, dass die Seite auch auf kleineren Bildschirmen gut aussieht.

In einem Beitrag möchte ich auf der linken Seite Bilder haben und auf der rechten Seite den dazu gehörigen Text, wenn der Bildschirm kleiner ist, soll der Text unter das Bild rutschen.

Ich habe etwas das Internet durchforstet und dabei u.a. diesen Beitrag im Forum gefunden: Layout: responsive Alternative zu einem Table

Entsprechend habe ich das umgesetzt und habe jetzt ein grob laufendes Minimalbeispiel:

<div class="row-fluid">
    <div class="span4"><img style="float: left;" src="images/bilder_website/fahrzeuge/BN_14_LF_01-01.jpg" alt="BN 14 LF 01 01" width="650" height="488" /></div>
    <div class="span8" margin-left="20px">
        <p>&nbsp;<strong><span style="font-size: 14pt;">Gerätefach 1</span></strong></p>
        <p><span style="font-size: 14pt;">Ein bisschen Text zum Thema, der etwas mehr als eine Zeile füllen sollte.</span></p>
    </div>
</div>
<div class="row-fluid">
    <div class="span4"><img style="float: left;" src="images/bilder_website/fahrzeuge/BN_14_LF_01-01.jpg" alt="BN 14 LF 01 01" width="650" height="488" /></div>
    <div class="span8" margin-left="20px">
        <p>&nbsp;<strong><span style="font-size: 14pt;">Gerätefach 2</span></strong></p>
        <p><span style="font-size: 14pt;">Ein bisschen Text zum Thema, der etwas mehr als eine Zeile füllen sollte.</span></p>
    </div>
</div>

Hiermit habe ich aber noch einige Schwierigkeiten, die vermutlich daher kommen, dass ich für diesen Beitrag mich das erste Mal mit html beschäftigt und keinen WYSIWYG-Editor benutzt habe.

1) Der Text im rechten <div> ist direkt am Bild dran, hier hätte ich lieber einen kleinen Abstand. Ich habe hierzu einiges gelesen, was padding bzw. margin angeht, aber bin nicht draus schlau geworden bzw. habe es nicht zum Laufen bekommen. Kann mir das nochmal jemand erklören, wie das genau geht?

2) Der Text vom zweiten Bild ist nicht neben dem zweiten Bild, sondern genau unterhalb des Textes vom ersten Bild. Ich habe zunächst vermutet, dass es daran liegen könnte, dass ich zweimal ein <div class="row-fluid"> nutze, aber wenn ich alles in ein großes <div class="row-fluid"> umändere, ändert dies nichts am Output. Wie schaffe ich es, dass der Text vom zweiten Bild auch wirklich neben dem zweiten Bild auftaucht?

Um das Problem besser zu verstehen, habe ich euch noch einen Screenshot angehangen, auf dem man den aktuellen Stand sieht.

Ich hoffe, es findet sich jemand der mir helfen kann, da ich aktuell etwas überfordert bin...

Danke im Voraus

Hey. Danke schonmal für die Antworten.

Den Link zur Seite/Problem habe ich tatsächlich vergessen, das tut mir leid. Hier: http://samuel.ff-endenich.de/i…ve/aktive-fahrzeuge/lf-10

Elwood Danke für das Template, das kannte ich noch nicht. Ich werde es mir mal angucken. Die EInsatzkomponente nutze ich bereits, bin aber noch nicht endgültig von ihrem Layout was Fahrzeuge angeht überzeugt. (siehe: http://samuel.ff-endenich.de/i…tive/aktive-fahrzeuge/mtf)

CurlY BracketS Ja genau das hatte ich gefunden und versucht umzusetzen. Wie gesagt habe ich gerade erst angefangen mich in das Thema html/css einzulesen und habe daher noch einige eher grundlegende Probleme...

Ich weiß tatsächlich gerade nicht, was mein Template vorraussetzt. Ich nutze dieses hier: https://astroidframework.com/

Finde hier aber auch keine Angaben darüber...

Hallo Anka!

Danke für deine Hilfe. Ich dachte, ich hätte das auch schon ausprobiert, aber dann muss ich da einen Fehler gemacht haben, denn jetzt funktioniert es problemlos

Danke auch für die beiden Links, ich werde mich mal weiter darin einlesen und vielleicht schaffe ich dann auch kleinere Anpassungen demnächst alleine!

Danke für die Hilfe an alle!!