htmlcssdrupal-7drupal-viewsmultiple-columns

How to display the labels and values in two separate columns in a view?


I created a view in Drupal 7 that displays some user fields. I'm currently using an unformatted list layout, but I'm not very pleased with the way it looks.

enter image description here

I'd like to display the field labels ("Name", "Age" and "Country") and the field values ("Jeroen", "19" and "Belgium") in my view in two columns, both outlined at the left.

enter image description here

I know how to remove the colons, but I don't have a clue about how to separate the field labels and values. How can I do that?


Edit: Giving Ajay's answer a try, I now have the following code:

<div>
 <div class = "user-label">Name</div>
 <div class ="user-value">[field_name]</div>
</div>
<div>
 <div class = "user-label">Age</div>
 <div class ="user-value">[field_age]</div>
</div>
<div>
 <div class = "user-label">Country</div>
 <div class ="user-value">[field_country]</div>
</div>

This is the styling:

 .user-label{
    float:left;
    font-weight: bold;
   }

  .user-value{
    float:left;
    margin-left: 20px;
  }

That doesn't look very pretty however. How can I align the values nicely in two columns?


Solution

  • Thanks for the updated HTML structure. You could go with float :

    <!--language:css-->.user-label {
      float:left;
      clear:left;
      width:5em;/* tune this, you may other div for input too*/
    }