CSS formatting for values

advertisements

I'm trying to align the values. The code is,

<section class="message success">
      Variable1: Value1<br/>
      Variable2 : Value2<br/>
</section>

.message.success {
border: 1px solid #b8c97b;
background-color: #e5edc4;
background-image: -o-linear-gradient(top,  #e5edc4,  #d9e4ac);
background-image: -ms-linear-gradient(top,  #e5edc4,  #d9e4ac);
background-image: -moz-linear-gradient(top,  #e5edc4,  #d9e4ac);
background-image: -webkit-gradient(linear, left top, left bottom, from(#e5edc4), to(#d9e4ac));
background-image: -webkit-linear-gradient(top,  #e5edc4,  #d9e4ac);
background-image: linear-gradient(top,  #e5edc4,  #d9e4ac);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5edc4', endColorstr='#d9e4ac');
color: #3f7227;
text-shadow: 0 1px 1px #fff;
}

I want the values to be aligned properly like this,

Variable1    :     Value1
Variable2    :     Value2

Thanks.


CSS :

.variable { margin-right : 40px; display: inline-block; width: 120px; }
.value { margin-left : 40px; display: inline-block; width: 120px; }

PHP Code :

echo '<span class="variable">'.$variable1.'</span>:<span class="value">'.$value1.'</span><br />';
echo '<span class="variable">'.$variable1.'</span>:<span class="value">'.$value1.'</span><br />';

... and so on ...

You can also work with CSS3 pseudo classes as :

span { display: inline-block; width: 120px; }
span:nth-child(odd) { margin-right : 40px;}
span:nth-child(even) { margin-left : 40px;}

In that case, your PHP code is lighter :

echo '<span>'.$variable1.'</span>:<span>'.$value1.'</span><br />';
echo '<span>'.$variable2.'</span>:<span>'.$value2.'</span><br />';

... and so on ...