The starting point is to clone the 'div' list template, which from your original post I think you have done. Remember to clone it though (make a copy of the views/list/tmpl/div folder and use that as the template), don't modify the original 'div' template, or you'll lose your changes next time you update.
Then modify default_row.php. The key here is, rather than just having it loop through the row data, is to manually place each element's row data.
You can access individual element data through $this->_row->data->table___element, where table___element is your full element name.
How you style your output is up to you. You can "cheat" and use a table layout, so you embed a table inside the main "row" div, and achieve your "three row high left element" layout that way, or you can use pure CSS and style it yourself.
Here's an example of how we did the main downloads list on the main Fabrik siite. note that this is from Fabrik 2.x, so there may be a few differences, but the basics still apply.
Here's our default_row.php:
PHP:
<div id="<?php echo $this->_row->id;?>" class="<?php echo $this->_row->class;?>">
<div <?php echo @$this->cellClass['downloads___id']; ?>>
<?php echo @$this->_row->data->downloads___id;?>
</div>
<div <?php echo @$this->cellClass['downloads___image']; ?>>
<?php echo @$this->_row->data->downloads___image;?>
</div>
<div <?php echo @$this->cellClass['downloads___title']; ?>>
<h3>
<?php echo @$this->_row->data->downloads___title;?>
</h3>
</div>
<div <?php echo @$this->cellClass['downloads___like']; ?>>
<?php echo @$this->_row->data->downloads___like;?>
</div>
<div <?php echo @$this->cellClass['downloads___description']; ?>>
<?php echo @$this->_row->data->downloads___description;?>
</div>
<div <?php echo @$this->cellClass['downloads___download']; ?>>
<?php echo @$this->_row->data->downloads___download;?>
</div>
<div <?php echo @$this->cellClass['downloads___type']; ?>>
<?php echo @$this->_row->data->downloads___type;?>
</div>
<div class="downloads___type_blabel">Type:</div>
<div <?php echo @$this->cellClass['downloads___joomla_version']; ?>>
<?php echo @$this->_row->data->downloads___joomla_version;?>
</div>
<div <?php echo @$this->cellClass['downloads___create_date']; ?>>
<?php echo @$this->_row->data->downloads___create_date;?>
</div>
<div class="downloads___create_date_blabel">Last updated:</div>
<div <?php echo @$this->cellClass['downloads___digg']; ?>>
<?php echo @$this->_row->data->downloads___digg;?>
</div>
<div <?php echo @$this->cellClass['fabrik_delete']; ?>>
<?php echo @$this->_row->data->fabrik_delete;?>
</div>
<div <?php echo @$this->cellClass['downloads___hits']; ?>>
<?php echo @$this->_row->data->downloads___hits;?>
</div>
<div class="downloads___hits_blabel">Downloads:</div>
<div <?php echo @$this->cellClass['downloads___version']; ?>>
<?php echo @$this->_row->data->downloads___version;?>
</div>
<div class="downloads___version_blabel">v:</div>
</div>
... and here's the template CSS, where we use absolute positioning to individually place each of the elements (note that this is appended to the the rest of the usual template CSS):
Code:
.fabrik_header{margin-top:6px;margin-left:1px;width:909px;height:98px; }
.fabrikTableHeading{position:absolute;top:32px;left:17px;width:110px;height:34px; }
.fabrik_row___downloads___id{ position:absolute;top:-110px;left:0px;width:0px;height:0px;display:none;}
.fabrik_row___downloads___image{ position:absolute;top:15px;left:17px;width:172px;height:157px;border:1px solid #000000;overflow:hidden;}
.fabrik_row___downloads___title{ position:absolute;top:15px;left:221px;width:215px;height:40px;color:#000000;}
.fabrik_row___downloads___title h3{padding:0;margin:0}
.fabrik_row___downloads___like{ position:absolute;top:11px;left:704px;width:50px;height:25px;}
.fabrik_row___downloads___description{ position:absolute;top:65px;left:401px;width:437px;height:90px;font-size:12px;text-align:left !important;}
.fabrik_row___downloads___download{ position:absolute;top:9px;left:793px;width:96px;height:28px;border:1px none #000000;overflow:hidden;}
.fabrik_row___downloads___type{ position:absolute;top:65px;left:254px;width:100px;height:23px;font-size:12px;}
.fabrik_row___downloads___joomla_version{ position:absolute;top:40px;left:217px;width:75px;height:23px;font-size:12px;}
.fabrik_row___downloads___create_date{ position:absolute;top:150px;left:812px;width:92px;height:29px;}
.fabrik_row___downloads___digg{ position:absolute;top:13px;left:626px;width:65px;height:25px;}
.fabrik_row___fabrik_delete{ position:absolute;top:150px;left:229px;width:65px;height:22px;}
.fabrik_row___downloads___hits{ font-size: 12px;
height: 27px;
left: 293px;
position: absolute;
top: 91px;
width: 79px;}
.fabrik_row___downloads___version{ position:absolute;top:40px;left:319px;width:79px;height:27px;font-size:12px;}
.oddRow0{border-radius: 15px;-moz-border-radius: 15px;border:1px solid #6fa8dc;background:rgba(159,197,248,0.25);height:187px;width:890px;}
.oddRow1{border-radius: 15px;-moz-border-radius: 15px;border:1px solid #6fa8dc;background:rgba(159,197,248,0.25);height:187px;width:890px;}
.fabrikFilterContainer{
background: none repeat scroll 0 0 rgba(159, 197, 248, 0.25);
border: 1px solid #6FA8DC;
border-radius: 15px 15px 15px 15px;
height: 43px;
margin: 41px 18px 0 0;
}
.filter_downloads___type_label{height: 25px;
left: 32px;
position: absolute;
top: 86px;
width: 69px;}
.filter_downloads___type{position:absolute;top:83px;left:67px;width:141px;height:25px;}
.filter_downloads___acl_label{position:absolute;top:83px;left:229px;width:69px;height:25px;}
.filter_downloads___acl{position:absolute;top:83px;left:292px;width:101px;height:25px;}
.filter_downloads___version_label{height: 25px;
left: 406px;
position: absolute;
top: 87px;
width: 69px;}
.filter_downloads___version{position:absolute;top:83px;left:460px;width:120px;height:25px;}
.fabrik_search_all{position:absolute;top:83px;left:655px;width:183px;height:25px;}
.fabrik_clear{position:absolute;top:83px;left:607px;width:37px;height:25px;}
.fabrik_search{position:absolute;top:82px;left:846px;width:43px;height:28px;}
.csvExportButton{position:absolute;display:block;top:19px;left:689px;width:89px;heght:25px}
.csvImportButton{position:absolute;display:block;top:18px;left:793px;width:98px;heght:25px}
.addbutton{position:absolute;display:block;top:18px;left:127px;width:28px;heght:25px}
.fabrik_delete{position:absolute;display:block;top:19px;left:485px;width:65px;heght:45px}
.downloads___type_blabel{ position:absolute;top:65px;left:219px;width:45px;height:25px;font-style:italic;font-size:12px;text-align:left !important;}
.downloads___create_date_blabel{ position:absolute;top:151px;left:715px;width:92px;height:25px;font-style:italic;font-size:12px;text-align:right !important;}
.downloads___hits_blabel{ position:absolute;top:91px;left:219px;width:92px;height:25px;font-style:italic;font-size:12px;text-align:left !important;}
.downloads___version_blabel{ position:absolute;top:40px;left:291px;width:25px;height:24px;font-size:12px;text-align:right !important;}
The above was actually generated using a plugin we had for Fabrik 2.x which generated templates from Balsamiq wireframe mockups. I don't think we'll be proting that forwards to 3.x. But with a little care yo can generate those coordinates and sizes yourself.
I'd probably recommend going for the "cheat" approach, and build a simple table structure inside a div wrapper. Yeah, I know we aren't supposed to use tables to define layout, but sometimes it's just sooo much easier! And there's plenty of tutorials out there on how to build tables like your desire doutput, using colspan and rowspan.
-- hugh