Fusion tables - how do I get the data to wrap with custom cards?

See more:

HTML

Google

Hi,
I have a Fusion Table which imports notes and details from a spreadsheet. However, the data doesn't wrap, instead I have had to use 'overflow:auto' to allow for a scroll bar. How do I get the data to automatically wrap?

What I have tried:

The Fusion Tables 'Custom Cards' code:

{template .contents}

<div class="googft-card-view">

<div>


{if $data.formatted['Category']=='Warranty'}
 {$data.formatted['Category']}  <br>
{else}
{if $data.formatted['Category']=='Insurance'}
 {$data.formatted['Category']}  <br>
{else}
{if $data.formatted['Category']=='Oliver'}
 {$data.formatted['Category']}  <br>
{/if}{/if}{/if}


{if $data.formatted.Date}
Date:  {$data.formatted.Date}<br>
{/if} 


{if $data.formatted.Name}
Name:  {$data.formatted.Name}<br>
{/if}


{if $data.formatted.Serial}
Serial Number:  {$data.formatted.Serial} <br>
{/if}




{if $data.formatted['Repair ID']}
Repair ID:  {$data.formatted['Repair ID']}<br>
{/if}


{if $data.formatted.Problem}
Problem:  {$data.formatted.Problem}<br>
{/if}


{if $data.formatted.Barcode}
Barcode:  {$data.formatted.Barcode}<br>
{/if}


{if $data.formatted['TCS - Repair Notes']}
Notes:  {$data.formatted['TCS - Repair Notes']}<p></p><br>
{/if}


      </div>
</div>
{/template}