einheitlicher Abstand - mit margin-left?

[Airlike]

Hallo

ich stehe ein wenig an und weiss nicht, wie ich folgendes Problem lösen kann.

Momentan sieht es so aus:



der code dazu als beispiel hier:

<div class="row">
<span><?php echo JText::_('Datum: '); ?></span><?php echo $i->datum;?>
</div>

Ziel wäre, dass es einen einheitlichen Abstand gibt und es dann so aussieht:



ich hab den obenstehenden Code nun mit meinem spärlichen Wissen so erweitert:

<div class="row">
<span><?php echo JText::_('Datum: '); ?></span><div style="margin-left: 100px;"><?php echo $i->datum;?></div>
</div>

funktionieren tuts zwar, aber nicht ganz wie gewünscht, siehe hier:




das Problem, dass die angaben nicht mehr auf gleicher Höhe sind, sieht man momentan auch live hier:

Test



wäre toll, wenn mir jemand sagen könnte, ob ich mich jetzt total verfahren habe oder in welche Richtung ich weiterdenken muss :)

gruss

 

[prm]

Für diese strukturierte Darstellung bietet sich m.E. die Verwendung einer Tabelle an.
Die Verwendung von CSS heißt ja nicht, dass Tabellen verboten sind.
Man soll sie eben dort einsetzen, wo sie im Hinblick auf ihre Funktion auch erforderlich sind.

 

[Airlike]

danke prm für deinen Input. In der Tat, auch eine Tabelle dürfte meinen Ansprüchen gerecht werden. Werd gleich mal versuchen das umzusetzen :)

Gruss

 

[Space Vampire]

ich würde hier ebenfalls eine tabelle einsetzen.
aber der vollständigkeit halber zwei weitere lösungsmöglichkeiten

Nummer 1:
P mit fester breite und einem rechts gefloateten SPAN

<p style="width:300px;">Kathegorie:<span style="float:right; width:150px; text-align:left;">Information</span></p>

Nummer 2:
Definierte Liste
HTML dl-Tag

 

[_Thor_]

Da sind wir mal wieder bei dem beliebten Thema, Tabelle oder Definitionsliste, ich würde eine Definitionsliste nehmen, weil du einem Term hier nur jeweils einen Wert zuordnest.