Hide/Show loses alignment information

This section formats nicely. <div class="sheet-3colrow">     <div class="sheet-col" style="width: 360px">         <div class="container">             <div class="row">                 <div class="column">Stats/Skill</div>                 <div class="column">Cost</div>                 <div class="column">Level</div>                 <div class="column">Bonus</div>                 <div class="column">Total</div>                 <div class="column">Roll</div>             </div>             <div class="row">                 <div class="column" style="color: crimson; font-size: 15px;" title="The measure of physical and manual dexterity, sense of balance and body control.">Agility</div>                 <div class="column"><input type="number" style="height: 24px; text-align: right; font-size: 15px " name="attr_agility_cost" disabled="" value="@{agility}"></div>                 <div class="column"><input type="number" style="height: 24px; text-align: right; font-size: 15px" name="attr_agility" value="0"></div>                 <div class="column"><input type="number" style="height: 24px; text-align: right; font-size: 15px" name="attr_agility_bonus" value="0"></div>                 <div class="column"><input type="number" style="height: 24px; text-align: right; font-size: 15px" name="attr_agility_total" disabled="" value="@{agility} + @{agility_bonus}" /></div>                 <div class="column">                     <button type="action" name="act_roll2attack" style="font-family:dicefontd20;">t</button>                     <input name="attr_agilitycollapse" type="checkbox" class="sheet-toggle-show" checked="checked" style="height: 10px" />                 </div>             </div>             <input hidden name="attr_agilitycollapse" style="height: 10px" type="checkbox" class="sheet-toggle-show" checked="@{agilitycollapse}" />             <div class="row">                 <div class="column" style="white-space: nowrap; color: darkgreen; font-size: 12px" title="This skill is a measure of body control, covering whole-body movements such as jumping, tumbling, and diving. Use Acrobatics to dodge enemy attacks and overcome obstacles. Medium and heavier armor gives Disadvantage to Acrobatics checks.">-Acrobatics</span></div>                 <div class="column"><input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics_cost" readonly /><br /></div>                 <div class="column"><input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics" value="0"></div>                 <div class="column"><input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics_bonus" value="0"></div>                 <div class="column"><input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics_total" disabled="" value="@{acrobatics} + @{acrobatics_bonus} + @{agility} + @{agility_bonus}" /><br /></div>                 <div class="column"><button type="roll" style="height: 18px; text-align: right;" name="roll_attack" value="&{template:default}..."></button></div>             </div>         </div>     </div> </div> However, If I put                      <div class="sheet-body">...</div> around the last <div class="row"> ... </div> in the above code,  the alignments for that row are lost. Here's the css: input.sheet-toggle-show:not(:checked) ~ div.sheet-body, input.sheet-toggle-hide:checked ~ div.sheet-body {     display: none; } .container {   display: flex;   flex-direction: column;   align-items: flex-start;   justify-content: space-between;   width: 400px; } .row {   display: flex;   justify-content: space-between;   width: 100%; } .column {   flex: 1;   padding: 5px;   text-align: center; } How do I maintain my formatting?

This is because you are using the bootstrap column/row setup. It requires having the rows be direct descendants of the column. Personally I avoid using the bootstrap classes like the plague as there are much easier ways to style things in modern CSS. However, since you probably don't want to rewrite your entire html, I'd recommend putting the body class directly on your row div rather than wrapping it. You may have to add !important to your display: none in order to override the native display of the row, but this will be the simplest fix.

This is all I’ve done so far. Do you have an example of not using bootstrap? Because I have no idea what you’re talking about one way or the other.

If I was redesigning the code, I would follow these steps: Remove all extraneous divs. div is a container, and is best using when you are containing more than one element. remove all inline styl;es. There's a lot of repeated styling there that&nbsp; can be easily handled (below) with classes At every stage, check if elements are actually needed, and remmove what isn't. Create the basic CSS Grid Add back any styling needed, in the form of Classes, not inline styles. So after performing steps 1-3 to the HTML, I'd end up with something like this: &lt; div class = "container" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "skills" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Stats/Skill &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Cost &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Level &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Bonus &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Total &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Roll &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; span title = "The measure of physical and manual dexterity, sense of balance and body control." &gt; Agility &lt;/ span &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_agility_cost" disabled = "" value = "@{agility}" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_agility" value = "0" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_agility_bonus" value = "0" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_agility_total" disabled = "" value = "@{agility} + @{agility_bonus}" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; button type = "action" name = "act_roll2attack" &gt; t &lt;/ button &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "checkbox" name = "attr_agilitycollapse" class = "toggle-show" checked = "checked" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input hidden name = "attr_agilitycollapse" type = "checkbox" class = "sheet-toggle-show" checked = "@{agilitycollapse}" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; span title = "This skill is a measure of body control, covering whole-body movements such as jumping, tumbling, and diving. Use Acrobatics to dodge enemy attacks and overcome obstacles. Medium and heavier armor gives Disadvantage to Acrobatics checks." &gt; -Acrobatics &lt;/ span &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_acrobatics_cost" readonly &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_acrobatics" value = "0" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_acrobatics_bonus" value = "0" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_acrobatics_total" disabled = "" value = "@{acrobatics} + @{acrobatics_bonus} + @{agility} + @{agility_bonus}" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; button type = "roll" name = "roll_attack" value = "&amp;{template:default}..." &gt;&lt;/ button &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &lt;/ div &gt; Some things I want to draw attention to here: All divs that contained a single element have been removed All divs that contained onlyt text have been replaced with spans or headings (h4). Any extraneous elements have been tremoved - in this case the &lt;br&gt; entries. They are for line breaks, and I don't see why they are in your code. Also here, the class container is being used to contaiin the entire sheet. Each section in the sheet will be given its own sub-container with its own name - this section is called skills . This allows us to ignore the built-in classes like sheet-3colrow and sheet-col .&nbsp; (do they need sheet- ? i don't know because I never use them.) But the rest of this code will ignore the container , and concentrate just on skills. As an aside, I might want to put each stat inside its own div container, if there's something I want to do something with group as a whole. That would look more like: &lt; div class = "container" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "skills" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "skill-headings" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Stats/Skill &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Cost &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Level &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Bonus &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Total &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; h4 &gt; Roll &lt;/ h4 &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "skill" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; span title = "The measure of physical and manual dexterity, sense of balance and body control." &gt; Agility &lt;/ span &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_agility_cost" disabled = "" value = "@{agility}" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_agility" value = "0" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_agility_bonus" value = "0" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_agility_total" disabled = "" value = "@{agility} + @{agility_bonus}" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; button type = "action" name = "act_roll2attack" style = " font-family:dicefontd20;" &gt; t &lt;/ button &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "checkbox" name = "attr_agilitycollapse" class = "sheet-toggle-show" checked = "checked" style = " height: 10px" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input hidden name = "attr_agilitycollapse" type = "checkbox" class = "sheet-toggle-show" checked = "@{agilitycollapse}" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "skill" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; span title = "This skill is a measure of body control, covering whole-body movements such as jumping, tumbling, and diving. Use Acrobatics to dodge enemy attacks and overcome obstacles. Medium and heavier armor gives Disadvantage to Acrobatics checks." &gt; -Acrobatics &lt;/ span &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_acrobatics_cost" readonly &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_acrobatics" value = "0" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_acrobatics_bonus" value = "0" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_acrobatics_total" disabled = "" value = "@{acrobatics} + @{acrobatics_bonus} + @{agility} + @{agility_bonus}" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; button type = "roll" name = "roll_attack" value = "&amp;{template:default}..." &gt;&lt;/ button &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &lt;/ div &gt; This is easier reading for humans, but there's good reason not to do this, so again, do this only if you need to. The rest of this code assumes we havent done this. Note: iuf you want to know how to style individual elements, cjeck out this site, particularly the HTML and CSS articles: <a href="https://cybersphere.me/roll20-sheet-author-master-list/" rel="nofollow">https://cybersphere.me/roll20-sheet-author-master-list/</a> Then for step 4, create the CSS Grid. In your CSS file, create a CSS declaration that looks like this: .skills { grid-area : skills; &nbsp; &nbsp; &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 75px repeat ( 5 , 52px ); &nbsp; &nbsp; column-gap : 5px ; } Here's what each line does: grid-rea: turns this section into a grid-item called skills . This will be used later , when building the container item. It's not needed for this example. display: grid : this converts the skills class into a grid. Everything contained inside it will be formatted across the grid. grid-template-columns: this converts every single element inside the skills item into a columns, 6 items wide, with the widths listed. The first column is 75px wide, the next 5 are 52px wide. column-gap: creates a gap between each column of 5px. At the top of your own CSS you have this: input.sheet-toggle-show:not(:checked) ~ div.sheet-body, input.sheet-toggle-hide:checked ~ div.sheet-body { &nbsp; &nbsp; display: none; } These seems to be referring to an input that isnt in your html, so I'll igore it. It looks a bit iffy anyway and might need modifying. So, how I would load the current html and css files in the custom sheet sandbox, and see what it looks like, to see what extra classes I need to create. That looks like this: That final roll column makes me do a doubletake. Why are those rows different? i look back at the html, and notice that fiorst the first column there is a div container which contains 2 elements, a button and checkbox, but the second row only has a button. This is probably why you were having a fomatting weirdness. So assuming every row will have a checkbox, I have two options (possibly more, but these two occur to me quickly): change the last item in the acrobatics row to a similar &lt;div&gt;,&nbsp; and adding a checkbox, to make sure eaxh row is the same. Remove the div from the first column, and change the grid to accountr for 7 columns, not 6. But there's other stuff there that makes me look twice. What is the agilitycollapse checkbox meant to do? Maybe that cjeckbox and the hidden attribute shouldnt exist. The hidden acrobatics checkbox looks weird too (for a roll20 element), and probably needs a rewrite, but the non-hidden version might too.

What do you want that checkbox to do? Is it needed?

I notice this two lines, also: &lt; input type = "number" name = "attr_agility_cost" disabled = "" value = "@{agility}" &gt; &lt; input type = "number" name = "attr_acrobatics_cost" readonly &gt; The first value is weird, Why is it disabled or readonly? If it's the same as Agility, why is it listed - maybe that column should be deleted? If it is kept you probably want something like one of these &lt; input type = "number" name = "attr_agility_cost" disabled = "true" value = "@{agility}" &gt; &lt; input type = "number" name = "attr_acrobatics_cost" disabled = "true" value = "@{acrobatics}" &gt; Or &lt; input type = "number" name = "attr_agility_cost" readonly value = "something" &gt; &lt; input type = "number" name = "attr_acrobatics_cost" readonly value = "something" &gt; or just delete the _cost column completely (which would also require a change in the CSS Grid). Note disabled columns cant be modified by sheet workers but are Autocalc fields (you can enter a formula and it will be calculated), while readonly attributes can be adjusted by sheet workers (a special kind of automation) but won't calculate automatically. the "something" here is a placeholder - it will be replaced by whatever you actually need. Note disabled="" and disabled="true" (and, for that matter, disabled="anything" ) work the same. It's more common to explicitly type out the "true" to make clear what's happening. ="" for most things usually means ="not true" so there is ambiguity without it.

Also those buttons at the end of each row are different - agility is an action button, acrobatics is a roll butto. They'd need to be same kind of button and might need renaming (to include the skill name) so they are unique. Roll buttons automatically look like the roll button (the d20 shown) while action buttons need some stylying as you have done here). They are also designed to run a macro, so thats porbably what you need here.

I think there's some misunderstanding what I'm needing. I need help with formatting, not functionality. The macros and scripts behind all of this are working. The checkboxes are working as specified here on this site. I know programmers have their own preferences on how things should look and operate, but this is what I best understand how to mark-up the text file. If you can work with me on how I've laid it out, that would be great. Your knowledge of more sophisticated methods is far above mine. I'm trying to get this working. Note that my original file is 6400 lines long and done with tables. It works...other than this section which I'm trying to convert to div as per your recommendation in another thread. If you look in the code below, the body div tag is needed to collapse the section. However, the body tag ruins the formatting. If you take the body div tag out, the formatting works great but the collapse does not. &lt;div class="sheet-3colrow"&gt; &nbsp; &nbsp; &lt;div class="sheet-col" style="width: 360px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="container"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="row"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;Stats/Skill&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;Cost&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;Level&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;Bonus&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;Total&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;Roll&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="row"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column" style="color: crimson; font-size: 15px;" title="The measure of physical and manual dexterity, sense of balance and body control."&gt;Agility&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="height: 24px; text-align: right; font-size: 15px " name="attr_agility_cost" disabled="" value="@{agility}"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="height: 24px; text-align: right; font-size: 15px" name="attr_agility" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="height: 24px; text-align: right; font-size: 15px" name="attr_agility_bonus" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="height: 24px; text-align: right; font-size: 15px" name="attr_agility_total" disabled="" value="@{agility} + @{agility_bonus}" /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_roll2attack" style="font-family:dicefontd20;"&gt;t&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_agilitycollapse" type="checkbox" class="sheet-toggle-show" checked="checked" style="height: 10px" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input hidden name="attr_agilitycollapse" style="height: 10px" type="checkbox" class="sheet-toggle-show" checked="@{agilitycollapse}" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-body"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="row"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column" style="white-space: nowrap; color: darkgreen; font-size: 12px" title="This skill is a measure of body control, covering whole-body movements such as jumping, tumbling, and diving. Use Acrobatics to dodge enemy attacks and overcome obstacles. Medium and heavier armor gives Disadvantage to Acrobatics checks."&gt;-Acrobatics&lt;/span&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics_cost" readonly /&gt;&lt;br /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics_bonus" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics_total" disabled="" value="@{acrobatics} + @{acrobatics_bonus} + @{agility} + @{agility_bonus}" /&gt;&lt;br /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;button type="roll" style="height: 18px; text-align: right;" name="roll_attack" value="&amp;{template:default} ..."&gt;&lt;/button&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="row"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column" style="white-space: nowrap; color: darkgreen; font-size: 12px" title="This skill is a measure of body control, covering whole-body movements such as jumping, tumbling, and diving. Use melee to dodge enemy attacks and overcome obstacles. Medium and heavier armor gives Disadvantage to melee checks."&gt;-melee&lt;/span&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_melee_cost" readonly /&gt;&lt;br /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_melee" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_melee_bonus" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_melee_total" disabled="" value="@{melee} + @{melee_bonus} + @{agility} + @{agility_bonus}" /&gt;&lt;br /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;button type="roll" style="height: 18px; text-align: right;" name="roll_attack" value="&amp;{template:default} ..."&gt;&lt;/button&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/div&gt; &lt;/div&gt; //used for collapsing the section under input.sheet-toggle-show:not(:checked) ~ div.sheet-body, input.sheet-toggle-hide:checked ~ div.sheet-body { &nbsp; &nbsp; display: none; } .container { &nbsp; display: flex; &nbsp; flex-direction: column; &nbsp; align-items: flex-start; &nbsp; justify-content: space-between; &nbsp; width: 400px; } .row { &nbsp; display: flex; &nbsp; justify-content: space-between; &nbsp; width: 100%; } .column { &nbsp; flex: 1; &nbsp; padding: 5px; &nbsp; text-align: center; } Body div tag in and section collapsed. Body div tag in and section not collapsed. Body div tag&nbsp; removed&nbsp; and section not collapsed. Formatting&nbsp; great ! Body div tag removed and section will not collapse. Formatting great !

I responded the way I did because you said this: Tom said: This is all I’ve done so far. Do you have an example of not using bootstrap? Because I have no idea what you’re talking about one way or the other. I didn't realise there were other lines not shown. I pointed oyt se differences in the code that might explain the alignment issue. If you want more specfici help, I'd suggest posying links to your complete sheet code files and hope someone looks at them.

That section is all I've converted from the table to the div. (my apologies for not specifying that in more detail). There are dozens more visible lines underneath in various other sections. There was no need to show all 6400 lines to ask why sheet-body is destroying my formatting. Truthfully, GiGs, that section above is what is the important stuff. I do not have the rest of the sheet set up for public use. Homebrew Rules only for our private game. If you copy that code into two files, html and css, and load it in the sandbox, you'll get the pictures I depicted up there. The checkbox will work though the scripts behind the spinners and buttons do not as I have not included the java. This is the equivalent to a stub program to debug and test a small malfunctioning feature. Your help on my last issue was amazing. Are you saying this code is not sufficient to see how sheet-body is performing? If not, what more is needed? This is a fully operational code snippet showing my issue.

Okay, Scott C. sent me down a path that seems to have worked.&nbsp; This looks like this fixed the formatting issue. Thanks, y'all! .sheet-body, .container { &nbsp; display: flex; &nbsp; flex-direction: column; &nbsp; align-items: flex-start; &nbsp; justify-content: space-between; &nbsp; width: 400px; }

Tom said: If you copy that code into two files, html and css, and load it in the sandbox, you'll get the pictures I depicted up there. The checkbox will work though the scripts behind the spinners and buttons do not as I have not included the java. This is the equivalent to a stub program to debug and test a small malfunctioning feature. Your help on my last issue was amazing. Are you saying this code is not sufficient to see how sheet-body is performing? If not, what more is needed? This is a fully operational code snippet showing my issue. The new code might be, there is a body class there this time. I['m a little concerned by the buttons here: &lt;div class="row"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column" style="white-space: nowrap; color: darkgreen; font-size: 12px" title="This skill is a measure of body control, covering whole-body movements such as jumping, tumbling, and diving. Use Acrobatics to dodge enemy attacks and overcome obstacles. Medium and heavier armor gives Disadvantage to Acrobatics checks."&gt;-Acrobatics&lt;/span&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics_cost" readonly /&gt;&lt;br /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics_bonus" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_acrobatics_total" disabled="" value="@{acrobatics} + @{acrobatics_bonus} + @{agility} + @{agility_bonus}" /&gt;&lt;br /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;button type="roll" style="height: 18px; text-align: right;" name="roll_attack" value="&amp;{template:default} ..."&gt;&lt;/button&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="row"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column" style="white-space: nowrap; color: darkgreen; font-size: 12px" title="This skill is a measure of body control, covering whole-body movements such as jumping, tumbling, and diving. Use melee to dodge enemy attacks and overcome obstacles. Medium and heavier armor gives Disadvantage to melee checks."&gt;-melee&lt;/span&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_melee_cost" readonly /&gt;&lt;br /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_melee" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_melee_bonus" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;input type="number" style="width: 52px; height: 24px; text-align: right; font-size: 12px" name="attr_melee_total" disabled="" value="@{melee} + @{melee_bonus} + @{agility} + @{agility_bonus}" /&gt;&lt;br /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="column"&gt;&lt;button type="roll" style="height: 18px; text-align: right;" name="roll_attack" value="&amp;{template:default} ..."&gt;&lt;/button&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; Thy both have the same name (roll_attack) so roll20 can't distinhuish between them. I don't know if they'll work properly when you click them, but they absolutely won't work properly if someone drags tem to the macro bar. For that, names have to be unique.

If you will look in my original post, you'll see: However, If I put&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-body"&gt;...&lt;/div&gt; around the last &lt;div class="row"&gt; ... &lt;/div&gt; That is where the problem was. The buttons work; they are type "roll" so they dump to the chat window. I didn't include the roll formula as it wasn't needed to debug the formatting issue. Thanks!

As GiGs said, you need to make your button names unique. As they are now, they will work when clicking directly on the button, but you will get only the last one when calling them from chat (or from token actions/the macro quick bar).

Understood.&nbsp; Not an issue, though.&nbsp; They are not called from chat. They will not be in the macro quick bar. They are not token actions. The user pushes it on the sheet only, next to the skill/stat/attack/defense/etc. They interpret the following, with different variables depending on their need. value="&amp;{template:default} {{name=@{skillname} Task Roll}}{{Base Difficulty/Target#: [[@{task_level}]]/[[@{task_level}*3]]}}{{Mod Difficulty/Target#:&nbsp; [[(@{task_level}+@{task_mod})]]/[[@{task_level} * 3 + @{task_mod} * 3 + @{target_adjustment}]]}}{{@{skillname} Total: [[ @{skillbonus} + @{skilllevel} + @{agility_bonus} + @{agility} ]]}}{{Final Target Number: [[ @{task_level} [Task Level] * 3 + @{task_mod} [Task Mod] * 3 + @{target_adjustment} - (@{skillbonus} + @{skilllevel} + @{agility_bonus} + @{agility}) ]]}}{{?{Task Type|Normal,Normal Task Roll [[ 1t[[[ {[[1d20|Advantage,Task Roll with Advantage [[ 1t[[[ {[[2d20kh1|Disadvantage,Task Roll at Disadvantage [[ 1t[[[ {[[2d20kl1} ]],-1}&gt;[[ {0, (@{task_level} * 3 + @{task_mod} * 3 + @{target_adjustment} - (@{skillbonus} + @{skilllevel} + @{agility_bonus} + @{agility}))}kh1 ]] ]]] ]]}}{{Roll: $[[6]]}}" But, this is being removed entirely to be replaced with an action button. This is why I'm changing from table to div. Action buttons don't work inside TD's.

Tom said: Understood.&nbsp; Not an issue, though.&nbsp; They are not called from chat. They will not be in the macro quick bar. They are not token actions. The thing is, when someone else uses the sheet, you can't control this. They might do those things. Action buttons can still be called from a user's created macros, which they might create for their own convenience, so it's wise to give the button's unique names.

Yep, what GiGs said. By their very nature, buttons on a sheet are meant to be called from those alternate places, so they need to be set up to handle calls from them.

I'm sorry I've insulted your notions, guys, but n o one else is using this sheet other than the players in my group. I have no plans to make it public. We have playing on Roll20 for years. Never been a problem. I guess y'all engage with more sophisticated players :-)&nbsp;

Tom said: I'm sorry I've insulted your notions, guys, but n o one else is using this sheet other than the players in my group. I have no plans to make it public. We have playing on Roll20 for years. Never been a problem. I guess y'all engage with more sophisticated players :-) Maybe we are thinking of our own experience :) - or more likely we are experienced sheet authors and just commenting ion good practices and we'd say this to anyone. But if you don't name those buttons uniquely you are limiting your existing players choices. Right now they can't use those buttons in their own macros. Maybe if they could, they might start creating them?

Your help is highly sought after and appreciated. It's clear to see that you and Scott are incredibly experienced with the roll20 stuff. As someone relatively new to creating a new sheet, the extraneous remarks on best practices vs. just answering the question is frustrating to us newbies...especially if we aren't experienced enough to sort through what is required to fix the problem vs. opinion. Please don't take this as foul criticism. I'm trying to put my best smile forward :-)

I don't want to belabour the point - if you don'6t want to do it, it's your game and group. But we wouldn't be suggesting something that is hard to do - like, say, removing HTML tables - now that owuld be a good practice, but a whole lot of work so we don't harp on about it. But changing the name of the buttons is really easy, and there's no downside. It's all upside, so there's no reason not to do it. But I'll get off my soapbox now, and be ready to help with other things :)