css formatting for values

Question

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.

Nachshon Schwartz · Accepted Answer · 2011-09-11 10:19:31Z

2

Best off using a table as so:

<table class="message success">
    <tr>
        <td class="var">Variable1</td>
        <td class="sem">:</td>
        <td class="val">Value1</td>
    </tr>
    <tr>
        <td class="var">Variable2</td>
        <td class="sem">:</td>
        <td class="val">Value2</td>
    </tr>
</table>

and then using css you can align as so:

.val {width:100px;}
.sem {width:40px;}
.var {width:100px;}

See live example: http://jsfiddle.net/nayish/uenzN/2/

edited Sep 11, 2011 at 10:19

answered Sep 11, 2011 at 10:13

Nachshon Schwartz

15.9k20 gold badges65 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mlh · Accepted Answer · 2011-09-11 10:25:11Z

1

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 ...

edited Sep 11, 2011 at 10:25

answered Sep 11, 2011 at 10:15

mlh

5842 gold badges7 silver badges18 bronze badges

Comments

Olli · Accepted Answer · 2011-09-11 10:10:48Z

1

Actually I cannot understand what you are wanting to do, but maybe you should use tables:

<table border="0">
<tr><td>Variable1:</td> <td>Value1</td></tr>
<tr><td>Variable2:</td> <td>Value2</td></tr>
</table>

answered Sep 11, 2011 at 10:10

Olli

7526 silver badges20 bronze badges

3 Comments

j0ker Over a year ago

I would add a third column to place the : in, so that you can align it in the middle: <tr><td>Variable1</td><td>:</td><td>Value1</td></tr>. Then do the alignment with css-classes that define the alignment and width of the tds.

Ajay Over a year ago

I want the values after : to be aligned

Olli Over a year ago

Ajay: yes they are aligned when you use my script. And if you want that : is always in the same position use the code provided by j0ker.

Martin Bean · Accepted Answer · 2011-09-11 11:22:22Z

0

I'd use a definition list if you're outputting key-value pairs. Your mark-up would like as follows:

<dl>
  <dt>Variable 1</dt> <dd>Value 1</dd>
  <dt>Variable 2</dt> <dd>Value 2</dd>
</dl>

You can then use CSS to style this list:

dt {
    display: block;
    float: left;
    clear: left;
}
dd {
    margin-left: 5em; /* this will line up the values */
}
dd:before {
    content: ':';
}

answered Sep 11, 2011 at 11:22

Martin Bean

39.6k28 gold badges134 silver badges207 bronze badges

Collectives™ on Stack Overflow

css formatting for values

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related