CODEWITHSUNDEEP
htmlcssforms
Ajay
Ajay

Reputation: 705

HTML Form Field value alignment

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.

Upvotes: 0

Views: 297

Answers (2)

kheya
kheya

Reputation: 7621

Your code seems fine. Here is demo: http://jsfiddle.net/H2V7t/

<style type="text/css">
    .plabel {
display:inline-block;  
width:100px;
}

.values  {
margin-left:50px;
}

</style>
<div style="clear:both">
    <span class='plabel'>Address</span>  
    <span class='values'>: This  is the value number one on right cell</span>
</div>

<div style="clear:both">
    <span class='plabel'>Address</span>
    <span class='values'>: This is the value number two on right cell</span>
</div>

Upvotes: 0

Sotiris
Sotiris

Reputation: 40096

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/

Upvotes: 1

Related Questions