Die Hintergrundfarbe eines Artikels, welcher einen Text sowie Bild enthält, sichtbar machen

  • Hallo Community!


    Ich bin gerade dabei eine Website zu erstellen und schaffe es nicht, dass ein 'article' vollständig mit einer bestimmten Farbe ausgefüllt ist. In dem article ist ein Bild sowie in Text; beides ist nebeneinander angeordnet.


    Wie bekomme ich also hin, dass der ganze article z.B. die Hintergrundfarbe weiß hat.


    Mein HTML:

    HTML: Article
    1. <article id="article-one">
    2. <div class="article-img">
    3. <img src="Pfad/zum/Bild">
    4. </div>
    5. <div class="text">
    6. <p> Das soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das                    soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das soll                    ein langer Text sein. Das heißt ich muss den irgendwie füllen. </p>
    7. </div>
    8. </article>


    Mein CSS:


    Ich hoffe mir kann jemand helfen.


    Danke im voraus


    Daykoo

  • Wie so häufig ist das Anordnen von Elementen mit float die Quelle des Problems und ebenfalls die Verwendung von Flexlayout die Lösung. Dann ist auch die Inflation von div-Containern überflüssig:

    Code
    1. <article id="article-one">
    2. <img class="article-img" src="images/dia0.jpg">
    3. <p class="text"> Das soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das soll ein langer
    4. Text sein.
    5. Das heißt ich muss den irgendwie füllen. Das soll ein langer Text sein. Das heißt ich muss den
    6. irgendwie füllen. Das soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das soll ein
    7. langer Text sein. Das heißt ich muss den irgendwie füllen.
    8. </p>
    9. </article>
    Code
    1. article{
    2. display: flex;
    3. align-items: center;
    4. padding: 5em 0;
    5. background-color: lightblue;
    6. }
    7. .article-img{
    8. }
    9. .text{
    10. }

    Zum Verständnis siehe hier:

    https://www.html-seminar.de/css-flexbox.htm

    (Die Farbe habe ich nur geändert, damit sie auf meiner Testseite sichtbar wurde.