Question

I have this code,

<span class='plabel'>Address</span> <span class='values'>: $address</span>

The CSS code :

.plabel { 
display:inline-block; 
width:100px; 
}

.values {
margin-left:50px;
}

Now when a value is displayed the value goes to the field where the field name is displayed.

Example,

Address : XXXX,
XXXX.

I want it to be,

Address : XXXX,
          XXXX.

Answer 1

wrap the span with a div and set fixed width for each one. Then use float for their position.

html

<div class="holder">
    <span class='plabel'>Address</span>
    <span class='values'>: Sotiris Val, Heraklion Crete, Greece</span>
</div>

css

.holder{width:220px;overflow:hidden;}
.plabel {
    float:left;
    display:inline-block;
    width:100px;
}

.values {
    width:120px;
    float:right;
}

Demo: http://jsfiddle.net/48RDZ/