Rendering a complex div on Outlook 365 - outlook-addin

Question

I'm working on an Outlook addin for a .Net Framework project. I would like the elements like the following to display in the email body:
This div is generated by the code:
<div ng-repeat="dateGroup in timeLine.DateGroups">
<div class="circle color{{dateGroup.ColorId}}Solid whiteBorder" ng-style="{'left': dateGroup.Offset + 'px', 'top': (timeLine.CenterLineTop + 1) + 'px', 'width': timeLine.DotWidth + 'px', 'height': timeLine.DotWidth + 'px'}"></div>
<div class="labelLine colorLine{{dateGroup.ColorId}}" ng-style="{'left': dateGroup.LineOffset + 'px', 'top': dateGroup.LineTop + 'px', 'width':':1px','height' : dateGroup.Height + 'px'}"></div>
<div ng-if="dateGroup.TextDirection == 0" class="entryLabel" ng-style="{'left': dateGroup.LabelOffSet + 'px', 'top' : dateGroup.LabelTop + 'px', 'width' : '450px !important'}">
<div ng-repeat="entry in dateGroup.Entries" style="position:relative;">
{{entry.EventDate | date:'MMM d'}} : {{entry.EventName}}
</div>
</div>
<div ng-if="dateGroup.TextDirection == 1" class="entryLabel" ng-style="{'text-align':'right', 'left': dateGroup.LabelOffSet + 'px', 'top': dateGroup.LabelTop + 'px', 'width':'450px !important'}">
<div ng-repeat="entry in dateGroup.Entries" style="position:relative;">
{{entry.EventDate | date:'MMM d'}} : {{entry.EventName}} <br />
</div>
</div>
</div>
<div ng-repeat="monthlabel in timeLine.TimeLineMonthLabels">
<div ng-if="monthlabel.MonthId == 12" class="monthLabel" ng-style="{'border':'none', 'left' : monthlabel.Offset + 'px' ,'top' : timeLine.MonthLabelTop + 'px' , 'width' : timeLine.MonthSectionWidth + 'px'}">{{monthlabel.MonthLabel}}</div>
<div ng-if="monthlabel.MonthId != 12" class="monthLabel" ng-style="{'left' : monthlabel.Offset + 'px' ,'top' : timeLine.MonthLabelTop + 'px' , 'width' : timeLine.MonthSectionWidth + 'px'}">{{monthlabel.MonthLabel}}</div>
</div>
<div ng-if="timeLine.TodayLineOffset > 0" class="todayLine" ng-style="{'height': timeLine.TodayLineHeight + 'px', 'top': timeLine.TodayLineTop + 'px', 'left': timeLine.TodayLineOffset + 'px'}"></div>
<div ng-if="timeLine.TodayLineOffset > 0" class="todayLabel" ng-style="{'width': timeLine.TodayLabelWidth + 'px', 'top': timeLine.TodayLabelTop + 'px', 'left': timeLine.TodayLabelOffset + 'px'}">Today</div>
The issue that I'm having is that there are HTML and css properties that aren't supported by Outlook 365, making re-rendering this div a bit difficult on outlook. Website to image is something I'm also considering, but I haven't found an efficient way to do it yet. Your insight as to how I might be able to render this on outlook is appreciated.

Answer 1

The email templates should be created using table tag. Many times we will face situation where div's are not aligned properly, we can solve this by showing data in table tag.