@@Reinhard > ~~~html > <div class="main-container"> > <div class="container"> > <span class="titel"><span class="left">titel:</span><span class="right">hier geht es um dies und das</span></span> > <span class="autor"><span class="left">autor:</span><span class="right">ich</span></span> > <span class="seiten"><span class="left">seiten:</span><span class="right">1</span></span> > <span class="woerter"><span class="left">wörter:</span><span class="right">200</span></span> > </div> > </div> > ~~~ > > Das erste div mit der Klasse main-container hat eine fixe Breite von 300px. Warum? Feste Breiten in Pixel sind im Web selten eine gute Idee. Und warum denkst du, zwei Container zu benötigen? Sämtliche `div` und `span` sind [falsch](https://forum.selfhtml.org/cites/121). Ersetze: `<div class="main-container">`{: .language-html} → `<table>`{: .language-html} `<div class="container"> `{: .language-html} → `<tbody>`{: .language-html} `<span class="titel"> `{: .language-html} → `<tr>`{: .language-html} `<span class="autor"> `{: .language-html} → `<tr>`{: .language-html} `<span class="seiten"> `{: .language-html} → `<tr>`{: .language-html} `<span class="woerter"> `{: .language-html} → `<tr>`{: .language-html} `<span class="left"> `{: .language-html} → `<th>`{: .language-html} `<span class="right"> `{: .language-html} → `<td>`{: .language-html} Die End-Tags natürlich entsprechend. > jeweils der 1. Buchstabe der span's mit der Klasse left untereinander. ~~~css th { text-align: left; font-weight: normal } ~~~ > Dagegen sollen die Wörter der Klasse right zentriert untereinander stehen. ~~~css td { text-align: center } ~~~ > Hinzu kommt, dass das Wort "titel" vertikal zentriert werden sollte, falls in der rechten Spalte (selbe Zeile) ein zu langer Titel steht und es somit zu einem Zeilenumbruch kommt. `th { vertical-align: middle }`{: .language-css} ist Default, muss also nicht angegeben werden. Im Übrigen sind `left` und `right` keine sinnvollen Bezeichner für Klassen. Wenn die nicht nebeneinander passen, stehen die Inhalte womöglich untereinander. LLAP 🖖 -- Ist diese Antwort _anstößig_? Dann könnte sie [_nützlich_](http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860) sein.

@@Reinhard > ~~~html > <div class="main-container"> > <div class="container"> > <span class="titel"><span class="left">titel:</span><span class="right">hier geht es um dies und das</span></span> > <span class="autor"><span class="left">autor:</span><span class="right">ich</span></span> > <span class="seiten"><span class="left">seiten:</span><span class="right">1</span></span> > <span class="woerter"><span class="left">wörter:</span><span class="right">200</span></span> > </div> > </div> > ~~~ > > Das erste div mit der Klasse main-container hat eine fixe Breite von 300px. Warum? Feste Breiten in Pixel sind im Web selten eine gute Idee. Und warum denkst du, zwei Container zu benötigen? Sämtliche `div` und `span` sind [falsch](https://forum.selfhtml.org/cites/121). Ersetze: `<div class="main-container">`{: .language-html} → `<table>`{: .language-html} `<div class="container"> `{: .language-html} → `<tbody>`{: .language-html} `<span class="titel"> `{: .language-html} → `<tr>`{: .language-html} `<span class="autor"> `{: .language-html} → `<tr>`{: .language-html} `<span class="seiten"> `{: .language-html} → `<tr>`{: .language-html} `<span class="woerter"> `{: .language-html} → `<tr>`{: .language-html} `<span class="left"> `{: .language-html} → `<th>`{: .language-html} `<span class="right"> `{: .language-html} → `<td>`{: .language-html} > jeweils der 1. Buchstabe der span's mit der Klasse left untereinander. ~~~css th { text-align: left; font-weight: normal } ~~~ > Dagegen sollen die Wörter der Klasse right zentriert untereinander stehen. ~~~css td { text-align: center } ~~~ > Hinzu kommt, dass das Wort "titel" vertikal zentriert werden sollte, falls in der rechten Spalte (selbe Zeile) ein zu langer Titel steht und es somit zu einem Zeilenumbruch kommt. `th { vertical-align: middle }`{: .language-css} ist Default, muss also nicht angegeben werden. Im Übrigen sind `left` und `right` keine sinnvollen Bezeichner für Klassen. Wenn die nicht nebeneinander passen, stehen die Inhalte womöglich untereinander. LLAP 🖖 -- Ist diese Antwort _anstößig_? Dann könnte sie [_nützlich_](http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860) sein.