Two Column Chat Window

This code produces the following image: CSS startRoll(`&{template:special} {{title=${character_name}}} {{${attackname}}} {{${attacknotes}}} {{roll=[[${dice}d20]]}} {{Attack Total: ${local_h_attack_based_on_score} }} {{Final TN: ${tn} }} {{Advantages: ${adv_count}}} {{Disadvantages: ${disadv_count}}} {{result=[[0]]}} {{Base Damage: ${total_damage}}}`, diceroll => {... HTML <div class="sheet-content">     <div class="sheet-key">Roll</div>     <div class="sheet-value"> {{computed::roll}}</div>         {{#allprops() title roll result}}             <div class="sheet-key">{{key}}</div>             <div class="sheet-value">{{value}}</div>             {{/allprops() title roll result}}     <div class="sheet-key">Result</div>     <div class="sheet-value"> {{computed::result}}</div> </div> This code produces the following image (two columns): CSS startRoll(`&{template:special} {{title=${character_name}}} {{${attackname}}} {{${attacknotes}}} {{roll=[[${dice}d20]]}} {{Attack Total: ${local_h_attack_based_on_score} }} {{Final TN: ${tn} }} {{Advantages: ${adv_count}}} {{Disadvantages: ${disadv_count}}} {{result=[[0]]}} {{Base Damage: ${total_damage}}}`, diceroll => { HTML <rolltemplate class="sheet-rolltemplate-special">     <div class="sheet-container">         <hr>         <div class="sheet-header">             {{#title}}<div class="sheet-title" style="font-size: 24px; background-color: darkblue; color: white; padding: 10px;">{{title}}</div>{{/title}}         </div>         <div>-----</div>         <div class="sheet-content" style="font-size: 16px;">             {{#allprops() title roll result}}             <div class="sheet-key">{{key}}{{value}}</div>             {{/allprops() title roll result}}         </div>         <div>-----</div>         <div class="sheet-value" style="font-size: 20px; padding: 10px;"> Roll: {{computed::roll}}</div>         <div class="sheet-value" style="font-size: 20px; padding: 10px;"> Result: {{computed::result}}</div>     </div> </rolltemplate> Yes, I have stuff that should be in CSS...ignore it, it's there for testing. How do I modify the html to support two columns but with less space between them?I have to widen my chat window to see the full text; it gets cut off if made narrower. (side note: it was working at one time, but I refreshed the screen, and it widened. I don't know what happened to change it).

I'd recommend a few changes: Use semantic html elements. This will help you make your code more readable. e.g., use an h1,h2,h3,h4, or h5 to wrap around your title instead of a straight div. It's kind of hard to ignore the inline css here since this is a CSS issue. There's no way to troubleshoot this without knowing what styling you are applying to your roll template. In general, the way to fix this is to use CSS grid, CSS flexbox, or CSS multi-column to do your layout. Usually, my personal preference is CSS grid because the fr unit makes it very simple to do even responsive layouts, but in this case I'm going to recommend CSS multi-column. If you change your html to (just changing the title so it uses an h2): <rolltemplate class="sheet-rolltemplate-special"> <div class="sheet-container"> <hr> <div class="sheet-header"> {{#title}}<h2 class="sheet-title" style="font-size: 24px; background-color: darkblue; color: white; padding: 10px;">{{title}}</h2>{{/title}} </div> <div>-----</div> <div class="sheet-content" style="font-size: 16px;"> {{#allprops() title roll result}} <div class="sheet-key">{{key}}{{value}}</div> {{/allprops() title roll result}} </div> <div>-----</div> <div class="sheet-value" style="font-size: 20px; padding: 10px;"> Roll: {{computed::roll}}</div> <div class="sheet-value" style="font-size: 20px; padding: 10px;"> Result: {{computed::result}}</div> </div> </rolltemplate> And then do this for the css (removing all the rest of your css, at least to test): .sheet-rolltemplate-special .sheet-content{ /* Set up dynamic columns that will get created based on content and the width of the roll template */ display:block;/* Not actually needed if the element is already using display:block */ column-width:200px;/*Replace 200px with whatever you want your minimum column size to be*/ } .sheet-rolltemplate-special .sheet-key{ /* Make sure the key content doesn't get split across columns */ break-inside:avoid; } That should give you two column display.

Thanks for your response. I tried it exactly like above and by taking the font information out. Below is the result. I don't know enough to troubleshoot. <rolltemplate class="sheet-rolltemplate-special">     <div class="sheet-container">         <hr>         <div class="sheet-header">             {{#title}}<h2 class="sheet-title">{{title}}</h2>{{/title}}         </div>         <div>-----</div>         <div class="sheet-content">             {{#allprops() title roll result}}             <div class="sheet-key">{{key}}{{value}}</div>             {{/allprops() title roll result}}         </div>         <div>-----</div>         <div class="sheet-value"> Roll: {{computed::roll}}</div>         <div class="sheet-value"> Result: {{computed::result}}</div>     </div> </rolltemplate>

The 200px I had in the example was too wide. A normal roll template output is only about 250px, so there wasn't enough width to make multiple columns. And then, additionally something I just noticed in the images from your first post; your second image looks like it is of a chat window that has been widened (you can do this by dragging the left edge of the chat window to the left). There is however no way for a character sheet to specify how wide the chat window should be.

You are the man! Interestingly, I did jack with that number, but didn't jack enough with it, I guess. And, yes, the other picture is wider. I was just showing what it took to get the whole thing. My apologies for not saying that. Thanks for your help!