How to modify HTML layout inside a View template I am very new to Drupal and this is my first post in this community. What I am trying to achieve I know may be very simple but just don't know how! So I am looking forward for expert help.

First please see the screenshot:



Below is what I want to achieve:


WHITE boxes are laid out as float: left;
I want A, B and C to shift below their respective titles, i.e. at A1, B1 and C1 spots respectively.
I want to make the TITLE + A1 to be under the same container so the container can float left itself. Same with TITLE  + B1 and TITLE + C1


I copied views-view-unformatted.tpl.php file to my custom theme folder. The code snippet is rendering the data fine:

&lt;?php foreach ($rows as $id =&gt; $row): ?&gt;
  &lt;div&lt;?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"';  } ?&gt;&gt;
    &lt;?php print $row ?&gt;
  &lt;/div&gt;
&lt;?php endforeach; ?&gt;

But I want each of the field in $row to be printed in a way I want, e.g.:

&lt;?php foreach ($rows as $id =&gt; $row): ?&gt;
  &lt;div&lt;?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"';  } ?&gt;&gt;
    &lt;div class="image-class"&gt;&lt;img src="" /&gt;&lt;/div&gt;
    &lt;div class="text-class"&gt;
      &lt;?php print $row-&gt;title ?&gt;&lt;br /&gt;
      &lt;?php print $row-&gt;body ?&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;?php endforeach; ?&gt;

I believe there is a way to do it but don't know how. $row-&gt;title or $row-&gt;body is actually printing (rendering) nothing.

Also, if I modify views-view-unformatted-tpl.php it will affect the entire site. So I want a separate view for this purpose. How to do this?
views-view-fields--[view-name]--machine name.tpl.php

Ex: views-view-fields--hello-world--block-1.tpl.php

&lt;div class="picture"&gt;
  &lt;?php print $fields["field_image"]-&gt;content; ?&gt;
&lt;/div&gt;

&lt;div class="text-wrapper"&gt;

  &lt;div class="title"&gt;
     &lt;?php print $fields["title"]-&gt;content; ?&gt;
  &lt;/div&gt;

  &lt;div class="small-summary"&gt;
     &lt;?php print $fields["body-summary"]-&gt;content; // if you r using a body summary ?&gt; 
     &lt;?php // if you are using an actual field then use:  print $fields["field_name"]-&gt;content; ?&gt;
  &lt;/div&gt;

&lt;/div&gt;


CSS

.picture { float: left; }