[ERLEDIGT] 2 divs in article...

[annsen]

...und article entspricht nur die Höhe des ersten DIVs.

Hallo, in die Runde.

ich habe eine (für mich) echt interessante Frage.

Ich habe schon jede Menge getestet und kann mir das Verhalten der DIVs so nicht erklären.
Meine Situation ist Folgende - ich habe 4 Artikel (article class="liste"), die ich untereinander abbilde. Jeder dieser "article"-Bereiche enthält 2 DIVs. Der erste DIV ("jahr") ist immer links ausgerichtet, der Zweite ("info") ist immer rechts ausgerichtet.
Im ersten DIV stehen Themen-Überschriften mit kurzen Anmerkungen, schräg darunter (rechtsbündig) dann ausführlichere Infos zum Thema im zweiten DIV.

<article class="liste">
    <div class="jahr">
        <h3>2000</h3>
        <p>Beginn</p>
    </div>

    <div class="info">
        <p>Hier fing es an.</p>
    </div>
</article>

<article class="liste">
    <div class="jahr">
        <h3>2005</h3>
        <p>Mitte</p>
    </div>

    <div class="info">
        <p>Hier ging es weiter.</p>
    </div>
</article>

Nun möchte ich, dass zwischen den Artikeln ein Abstand eingehalten wird und habe ein "margin-bottom" für die "article.liste" vergeben.

Lt. Chrome-DevTools entspricht article aber nur dem ersten DIV ("jahr") obwohl im HTML das article-Element erst nach dem zweiten DIV ("info") geschlossen wird.

Die Abstände werden somit nicht vom HTML-Ende des article-Elements gerechnet sondern vom Ende des ersten DIVs (das lt. DevTools das Ende des article-Elements darstellt)

Kann mir jemand erklären wo mein Denkfehler ist/warum das so umgesetzt wird?

Vielen Dank!!!

 

[MrMurphy]

Hallo

Ohne das CSS kann ich nur raten.

Wahrscheinlich verwendest du float ohne dich über die Auswirkungen informiert zu haben. Zum Beispiel, dass gefloatete Elemente aus dem Dokumentfluß genommen werden.

Zum Ausrichten ist und war float nie gedacht. Mit float soll Text andere Elemente, wie zum Beispiel Bilder, umfließen. Da es früher nichts besseres gab wurde es zur Anordnung des Layouts mißbraucht.

Das ist heute nicht mehr notwendig, da speziell für Probleme wie deines das Flexbox-Modell entwickelt wurde. Deshalb solltest du dich damit beschäftigen.

Gruss

MrMurphy

 

[annsen]

Wahrscheinlich verwendest du float ohne dich über die Auswirkungen informiert zu haben. Zum Beispiel, dass gefloatete Elemente aus dem Dokumentfluß genommen werden.

Zum Ausrichten ist und war float nie gedacht. Mit float soll Text andere Elemente, wie zum Beispiel Bilder, umfließen. Da es früher nichts besseres gab wurde es zur Anordnung des Layouts mißbraucht.

Das ist heute nicht mehr notwendig, da speziell für Probleme wie deines das Flexbox-Modell entwickelt wurde. Deshalb solltest du dich damit beschäftigen.

Gruss

MrMurphy

Exakt!

article.liste {
    margin-bottom: 2%;
}

.jahr {
    width: 100%;
    margin-bottom: 2%;
    }

.info {
    width: 80%;
    /* float: right; */
    color: rgb(216,211,202);
    font-weight: normal;
    font-size: 90%;
    text-align: right;
    }

Ich habe "float" jetzt mal auskommentiert und schon stimmen die Abstände. Jetzt muss ich es noch rechtsbündig anordnen.
Ich lese grad Peter Müller "Flexible Boxes" und bastle dann parallel immer an ein/zwei Projekten. Und bisher war das Thema im Buch noch nicht an der Reihe - werd ich mal ohne zu basteln ein paar Seiten lesen... :)

Habe auch neulich schonmal im Netz ein paar Zeilen zum Thema gefunden - auch die schau ich mir morgen Vormittag (nachher) gleich nochmal an.

Vielen Dank für den Hinweis!!

 

[SpiceLab]

Warum wohl diese CSS-relevante Frage nicht direkt im Fachforum gestellt wurde ...???

Und mir die (Sonntags)Arbeit zu früher Morgenstunde erspart hätte, hier für Ordnung zu sorgen.

 

[MrMurphy]

Hallo

Ich geh' mal davon aus dass bei .jahr statt 100% eher 20% stehen soll.

Bei dem CSS musst du für Flexbox nur

article.liste {
   margin-bottom: 2%;
}

zu

article.liste {
   margin-bottom: 2%;
   display: flex;
}

erweitern.

Gruss

MrMurphy