Was hier fehlt, ist dein CSS, weil das das Erscheinungsbild festlegt. Ich würde Dir aber im ersten Schritt ein Markup in dieser Art vorschlagen. Das inline-block ist das wichtigste. Mit Flex geht es natürlich auch, setzt aber modernere Browser voraus. Vor allem habe ich auf - vermutlich - unnötige Klassen verzichtet und statt dessen etwas längere Selektoren im CSS eingesetzt. ~~~html <div class="product-field product-field-type-5"> <div>Jahrgang</div> <div>2011 und 2012</div> </div> <div class="product-field product-field-type-5"> <div>Kategorie</div> <div>Rotwein</div> </div> ~~~ ~~~css div.product-field { margin: 1em 1em; } div.product-field div { display: inline-block; } div.product-field div:nth-child(1) { display: inline-block; width: 6em; color: #C00; } ~~~ Ich hätte ja gerne ein semantischeres Markup empfohlen, bin aber selbst etwas ratlos was hier angemessen ist. * dl/dt/dd, wie MrMurphy meint? Ist das eine Liste von Definitionen? * label und p? Es ist kein Formular, darum stört mich label * h1 und p? Überschriften gliedern das Dokument, das hier ist aber keine Gliederung. Aber dafür gibt's hier kompetentere Kollegen. Die DIV-Lösung oben sieht im Browser jedenfalls so aus wie Du es gern hättest. Passendere Elemente werden sich sicher noch finden. Rolf

Was hier fehlt, ist dein CSS, weil das das Erscheinungsbild festlegt. Ich würde Dir aber im ersten Schritt ein Markup in dieser Art vorschlagen. Das inline-block ist das wichtigste. Mit Flex geht es natürlich auch, setzt aber modernere Browser voraus. ~~~html <div class="product-field product-field-type-5"> <label>Jahrgang</label> <div>2011 und 2012</div> </div> <div class="product-field product-field-type-5"> <label>Kategorie</label> <div>Rotwein</div> </div> ~~~ ~~~css div.product-field { margin: 1em 1em; } div.product-field div { display: inline-block; } div.product-field div:nth-child(1) { display: inline-block; width: 6em; color: #C00; } ~~~ Ich hätte ja gerne ein semantischeres Markup empfohlen, bin aber selbst etwas ratlos was hier angemessen ist. * dl/dt/dd, wie MrMurphy meint? Ist das eine Liste von Definitionen? * label und p? Es ist kein Formular, darum stört mich label * h1 und p? Überschriften gliedern das Dokument, das hier ist aber keine Gliederung. Aber dafür gibt's hier kompetentere Kollegen. Die DIV-Lösung oben sieht im Browser jedenfalls so aus wie Du es gern hättest. Passendere Elemente werden sich sicher noch finden. Rolf

Was hier fehlt, ist dein CSS, weil das das Erscheinungsbild festlegt. Ich würde Dir aber im ersten Schritt ein Markup in dieser Art vorschlagen. Das inline-block ist das wichtigste. Mit Flex geht es natürlich auch, setzt aber modernere Browser voraus. ~~~html <div class="product-field product-field-type-5"> <label>Jahrgang</label> <div>2011 und 2012</div> </div> <div class="product-field product-field-type-5"> <div>Kategorie</div> <div>Rotwein</div> </div> ~~~ ~~~css div.product-field { font: bold 12pt sans-serif; margin: 1em 1em; } div.product-field div { display: inline-block; } div.product-field label { display: inline-block; width: 6em; color: #C00; } ~~~ Ich hätte ja gerne ein semantischeres Markup empfohlen, bin aber selbst etwas ratlos was hier angemessen ist. * dl/dt/dd, wie MrMurphy meint? Ist das eine Liste von Definitionen? * label und p? Es ist kein Formular, darum stört mich label * h1 und p? Überschriften gliedern das Dokument, das hier ist aber keine Gliederung. Aber dafür gibt's hier kompetentere Kollegen. Die DIV-Lösung oben sieht im Browser jedenfalls so aus wie Du es gern hättest. Passendere Elemente werden sich sicher noch finden. Rolf

Was hier fehlt, ist dein CSS, weil das das Erscheinungsbild festlegt. Ich würde Dir aber im ersten Schritt ein Markup in dieser Art vorschlagen. Das inline-block ist das wichtigste. ~~~html <div class="product-field product-field-type-5"> <label>Jahrgang</label> <div>2011 und 2012</div> </div> <div class="product-field product-field-type-5"> <div>Kategorie</div> <div>Rotwein</div> </div> ~~~ ~~~css div.product-field { font: bold 12pt sans-serif; margin: 1em 1em; } div.product-field div { display: inline-block; } div.product-field label { display: inline-block; width: 6em; color: #C00; } ~~~ Ich hätte ja gerne ein semantischeres Markup empfohlen, bin aber selbst etwas ratlos was hier angemessen ist. dl/dt/dd? label und p? h1 und p? Bringt für mich alles zu viel eigene und für den Zweck unpassende Semantik mit. Aber dafür gibt's hier kompetentere Kollegen. Die DIV-Lösung oben sieht im Browser jedenfalls so aus wie Du es gern hättest, ist aber vermutlich semantisch unpassend umgesetzt. Rolf