I was wondering if anyone had any familiarity with this. I'm trying to have a side by side list in an email template.

I'm using RazorEngine: https://antaris.github.io/RazorEngine/TemplateBasics.html

And following this answer: Multiple lists put side-by-side and with a styled title header

I have in my template:

<head>
<style>
    ul, li {
        margin: 0;
        padding: 0 0 0 15px;
    }

    .column {
        float: left;
        margin: 0 20px 0 0;
    }
</style>
</head>

And then just copied the html:

<div class="column">
        <h2>First Column</h2>
        <ul>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
        </ul>
    </div>

<div class="column">
    <h2>Second Column</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</div>

I compile my template like this:

 using (var reader = new StreamReader(stream))
                {
                    var template = reader.ReadToEnd();
                    var emailBody = Engine.Razor.RunCompile(template, "MyTemplate", null, model);

But when I receive my email. It's basically not in two columns, but one on top of the other. The CSS doesn't seem to work the same. Does anyone have any advice? Thanks!

Related posts

Recent Viewed