Chronicles of Darkness sheet layout problems

I make Chronicles of Darkness expanded sheet, based on the Werewolf The Forsaken 2E one , by Kevin J., a.k.a. Rats. It mostly work, but I have some layout issues with it. Here are most basic ones... Attributes numericals ( P:,   F:,  R: ) are 'flowing' outside of their columns Here is another - Merits label is moving outside of column center And here is relevant codes snipets - Attributes <div class="sheet-3colrow"> <div class="sheet-col"> Name: <input type="text" name="attr_name"> </div> <div class="sheet-col"> Virtue: <input type="text" name="attr_virtue"> </div> <div class="sheet-col"> Type:<select name="attr_ephtype"> <option value="angel">Angel</option> <option value="fae">Fae</option> <option value="ghost">Ghost</option> <option value="goetia">Goetia</option> <option value="spirit">Spirit</option> </select> </div> </div><div class="sheet-3colrow"> <div class="sheet-col"> Player: <input type="text" name="attr_player"> </div> <div class="sheet-col"> Vice: <input type="text" name="attr_vice"> </div> <div class="sheet-col"> Rank: <input type="number" name="attr_rank" min="0" max="10"> </div> </div><div class="sheet-3colrow"> <div class="sheet-col"> Concept:<input type="text" name="attr_concept"> </div> <div class="sheet-col"> Choir: <input type="text" name="attr_choir"> </div> <div class="sheet-col"> Descant: <input type="text" name="attr_descant"> </div> </div> <div class="sheet-3colrow"> <h2>Attributes</h2> <div class="sheet-col"> <h4>Power</h4> <div class="sheet-dots"><input type="radio" name="attr_power" value="1" checked="checked"><span></span> <input type="radio" name="attr_power" value="2"><span></span> <input type="radio" name="attr_power" value="3"><span></span> <input type="radio" name="attr_power" value="4"><span></span> <input type="radio" name="attr_power" value="5"><span></span> <input type="radio" name="attr_power" value="6"><span></span> <input type="radio" name="attr_power" value="7"><span></span> <input type="radio" name="attr_power" value="8"><span></span> <input type="radio" name="attr_power" value="9"><span></span> <input type="radio" name="attr_power" value="10"><span></span> <input type="radio" name="attr_power" value="11"><span></span> <input type="radio" name="attr_power" value="12"><span></span> <input type="radio" name="attr_power" value="13"><span></span> <input type="radio" name="attr_power" value="14"><span></span> <input type="radio" name="attr_power" value="15"><span></span> </div> </div> <div class="sheet-col"> P: <input type="number" name="attr_power"> </div> <div class="sheet-col"> </div> <div class="sheet-3colrow"> <div class="sheet-col"> <h4>Finesse</h4> <div class="sheet-dots"><input type="radio" name="attr_finesse" value="1" checked="checked"><span></span> <input type="radio" name="attr_finesse" value="2"><span></span> <input type="radio" name="attr_finesse" value="3"><span></span> <input type="radio" name="attr_finesse" value="4"><span></span> <input type="radio" name="attr_finesse" value="5"><span></span> <input type="radio" name="attr_finesse" value="6"><span></span> <input type="radio" name="attr_finesse" value="7"><span></span> <input type="radio" name="attr_finesse" value="8"><span></span> <input type="radio" name="attr_finesse" value="9"><span></span> <input type="radio" name="attr_finesse" value="10"><span></span> <input type="radio" name="attr_finesse" value="11"><span></span> <input type="radio" name="attr_finesse" value="12"><span></span> <input type="radio" name="attr_finesse" value="13"><span></span> <input type="radio" name="attr_finesse" value="14"><span></span> <input type="radio" name="attr_finesse" value="15"><span></span> </div> </div> <div class="sheet-col"> F: <input type="number" name="attr_finesse"> <br> </div><div class="sheet-col"> <h4>Size:</h4> <input type="number" name="attr_size"> <br> <h4>Defense:</h4> <input type="number" name="attr_defense"> <br> <h4>Initiative:</h4> <input type="number" name="attr_initmod"> <br> <h4>Speed:</h4> <input type="number" name="attr_speed"> <br> <h4>Armor:</h4> <input type="text" name="attr_armor" class="sheet-armorfield"> </div> </div> </div><div class="sheet-3colrow"> <div class="sheet-col"> <h4>Resistance</h4> <div class="sheet-dots"><input type="radio" name="attr_resistance" value="1" checked="checked"><span></span> <input type="radio" name="attr_resistance" value="2"><span></span> <input type="radio" name="attr_resistance" value="3"><span></span> <input type="radio" name="attr_resistance" value="4"><span></span> <input type="radio" name="attr_resistance" value="5"><span></span> <input type="radio" name="attr_resistance" value="6"><span></span> <input type="radio" name="attr_resistance" value="7"><span></span> <input type="radio" name="attr_resistance" value="8"><span></span> <input type="radio" name="attr_resistance" value="9"><span></span> <input type="radio" name="attr_resistance" value="10"><span></span> <input type="radio" name="attr_resistance" value="11"><span></span> <input type="radio" name="attr_resistance" value="12"><span></span> <input type="radio" name="attr_resistance" value="13"><span></span> <input type="radio" name="attr_resistance" value="14"><span></span> <input type="radio" name="attr_resistance" value="15"><span></span> </div> </div> </div><div class="sheet-col"> R: <input type="number" name="attr_resistance"> </div><hr> Merits: <div style="width: 65%; margin-left: .9%; border-left: 1px solid #ddd; float: left;"> <h2>Other Traits</h2> <div class="sheet-2colrow"> <div class="sheet-col"> <h3>Powers Lists</h3> <div class="sheet-merits"> <input type="text" name="attr_monpowerslist1"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist1dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist1dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist1dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist1dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist1dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist1dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist2"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist2dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist2dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist2dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist2dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist2dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist2dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist3"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist3dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist3dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist3dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist3dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist3dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist3dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist4"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist4dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist4dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist4dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist4dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist4dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist4dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist5"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist5dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist5dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist5dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist5dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist5dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist5dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist6"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist6dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist6dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist6dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist6dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist6dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist6dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist7"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist7dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist7dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist7dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist7dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist7dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist7dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist8"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist8dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist8dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist8dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist8dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist8dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist8dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist9"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist9dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist9dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist9dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist9dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist9dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist9dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist10"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist10dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist10dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist10dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist10dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist10dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist10dots" value="5"><span></span> </div> </div> <br> <h3>Merits</h3> <div class="sheet-merits"> <input type="text" name="attr_monmerit1"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit1dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit1dots" value="1"><span></span> <input type="radio" name="attr_monmerit1dots" value="2"><span></span> <input type="radio" name="attr_monmerit1dots" value="3"><span></span> <input type="radio" name="attr_monmerit1dots" value="4"><span></span> <input type="radio" name="attr_monmerit1dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit2"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit2dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit2dots" value="1"><span></span> <input type="radio" name="attr_monmerit2dots" value="2"><span></span> <input type="radio" name="attr_monmerit2dots" value="3"><span></span> <input type="radio" name="attr_monmerit2dots" value="4"><span></span> <input type="radio" name="attr_monmerit2dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit3"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit3dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit3dots" value="1"><span></span> <input type="radio" name="attr_monmerit3dots" value="2"><span></span> <input type="radio" name="attr_monmerit3dots" value="3"><span></span> <input type="radio" name="attr_monmerit3dots" value="4"><span></span> <input type="radio" name="attr_monmerit3dots" value="5"><span></span> </div> <input type="text" name="attr_monmonmerit4"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit4dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit4dots" value="1"><span></span> <input type="radio" name="attr_monmerit4dots" value="2"><span></span> <input type="radio" name="attr_monmerit4dots" value="3"><span></span> <input type="radio" name="attr_monmerit4dots" value="4"><span></span> <input type="radio" name="attr_monmerit4dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit5"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit5dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit5dots" value="1"><span></span> <input type="radio" name="attr_monmerit5dots" value="2"><span></span> <input type="radio" name="attr_monmerit5dots" value="3"><span></span> <input type="radio" name="attr_monmerit5dots" value="4"><span></span> <input type="radio" name="attr_monmerit5dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit6"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit6dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit6dots" value="1"><span></span> <input type="radio" name="attr_monmerit6dots" value="2"><span></span> <input type="radio" name="attr_monmerit6dots" value="3"><span></span> <input type="radio" name="attr_monmerit6dots" value="4"><span></span> <input type="radio" name="attr_monmerit6dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit7"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit7dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit7dots" value="1"><span></span> <input type="radio" name="attr_monmerit7dots" value="2"><span></span> <input type="radio" name="attr_monmerit7dots" value="3"><span></span> <input type="radio" name="attr_monmerit7dots" value="4"><span></span> <input type="radio" name="attr_monmerit7dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit8"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit8dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit8dots" value="1"><span></span> <input type="radio" name="attr_monmerit8dots" value="2"><span></span> <input type="radio" name="attr_monmerit8dots" value="3"><span></span> <input type="radio" name="attr_monmerit8dots" value="4"><span></span> <input type="radio" name="attr_monmerit8dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit9"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit9dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit9dots" value="1"><span></span> <input type="radio" name="attr_monmerit9dots" value="2"><span></span> <input type="radio" name="attr_monmerit9dots" value="3"><span></span> <input type="radio" name="attr_monmerit9dots" value="4"><span></span> <input type="radio" name="attr_monmerit9dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit10"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit10dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit10dots" value="1"><span></span> <input type="radio" name="attr_monmerit10dots" value="2"><span></span> <input type="radio" name="attr_monmerit10dots" value="3"><span></span> <input type="radio" name="attr_monmerit10dots" value="4"><span></span> <input type="radio" name="attr_monmerit10dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit11"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit11dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit11dots" value="1"><span></span> <input type="radio" name="attr_monmerit11dots" value="2"><span></span> <input type="radio" name="attr_monmerit11dots" value="3"><span></span> <input type="radio" name="attr_monmerit11dots" value="4"><span></span> <input type="radio" name="attr_monmerit11dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit12"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit12dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit12dots" value="1"><span></span> <input type="radio" name="attr_monmerit12dots" value="2"><span></span> <input type="radio" name="attr_monmerit12dots" value="3"><span></span> <input type="radio" name="attr_monmerit12dots" value="4"><span></span> <input type="radio" name="attr_monmerit12dots" value="5"><span></span> </div> </div>

Hi Karol, Do you have any css that applies to this that you can post/link?

Whole CSS file of the project ( it's 1/10 th of HTML file in list ): .charsheet input.sheet-page1:checked ~ div.sheet-page1, .charsheet input.sheet-page2:checked ~ div.sheet-page2, .charsheet input.sheet-page3:checked ~ div.sheet-page3, .charsheet input.sheet-page4:checked ~ div.sheet-page4{ display: block; border-top: 1px black solid; } .charsheet div.sheet-page1, .charsheet div.sheet-page2, .charsheet div.sheet-page3, .charsheet div.sheet-page4{ display: none; } .charsheet div.sheet-type{ display: none; float: left; } .charsheet input.sheet-tab{ display: none; float: left; } .charsheet input[type=radio] + label{ content: ''; border: solid 1px black; background: white; color: black; font-weight: bold; width: 10%; text-align: center; padding: 0%; float: left; border-radius: 10% 10% 0% 0%; margin-bottom: -1px; } .charsheet input[type=radio]:hover + label{ background: gray; } .charsheet input[type=radio]:checked + label{ border-bottom: 1px white solid; } .charsheet div.sheet-page1,.charsheet div.sheet-page2{ display: none; } .charsheet .sheet-col input[type=text]{ width: 75%; float: right; border: none; border-radius: 0%; border-bottom: 1px black solid; height: 1em; } .charsheet h2{ text-align: center; } .charsheet h4{ float: left; } .charsheet .sheet-dots{ float: right; } .charsheet h3{ text-align: center; } .charsheet .sheet-skillnote{ text-align: center; font-style: italic; } .charsheet .sheet-merits input[type="text"]{ float: left; width: 63%; height: 1.5em !important; } .charsheet .sheet-tells input[type="text"]{ float: left; width: 100%; height: 1.5em !important; } /* Hide actual dot/checkbox */ .charsheet input[type="radio"], .charsheet input[type="checkbox"] { position: absolute; opacity: 0; width: 10px; cursor: pointer; z-index: 1; } /* Styles common to fake dot and checkbox */ .charsheet input[type="radio"] + span::before, .charsheet input[type="checkbox"] + span::before { border: solid 1px black; line-height: 10px; display: inline-block; vertical-align: middle; background: white; } /* Styles unique to fake dot (checked or left of checked) */ .charsheet input[type="radio"] + span::before { background: black; content: ''; width: 10px; height: 10px; font-size: 36px; border-radius: 50%; } /* Styles unique to fake checkbox (unchecked) */ .charsheet input[type="checkbox"] + span::before { position:relative; content: ""; width: 10px; height: 10px; } /* Styles unique to fake checkbox (checked) */ .charsheet input[type="checkbox"]:checked + span::before { background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } /* Remove dot from all radios _after_ selected one */ .charsheet input[type="radio"]:checked ~ input[type="radio"] + span::before { background: white; } .charsheet input.sheet-zero:checked + span::before { opacity: 0; } .charsheet input.sheet-zero:hover + span::before { opacity: 1; } .charsheet input.sheet-zero+ span::before { font-size: 12px; content: ""; opacity: 0.25; background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } .charsheet .sheet-aspcon textarea{ height: 50px; width: 100%; border: 1px solid black; border-radius: 0%; resize: none; } .charsheet .sheet-aspcon textarea:focus{ outline: none; } .charsheet .sheet-healthboxcontainer .sheet-healthbox + span::before{ border-radius: 0%; display: none; background: white; } .charsheet .sheet-healthboxcontainer .sheet-healthbox:checked + span::before{ display: inline-block; } .charsheet .sheet-healthboxcontainer .sheet-bash + span::before{ background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } .charsheet .sheet-healthboxcontainer .sheet-leth + span::before{ background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } .charsheet .sheet-healthboxcontainer .sheet-agg + span::before{ background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%), linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } .charsheet .sheet-healthboxcontainer .sheet-blank + span::before{ background: black; } .charsheet .sheet-healthboxcontainer .sheet-healthbox{ z-index: 101; } .charsheet .sheet-healthboxcontainer .sheet-empty{ z-index: 102; } input.sheet-empty:checked ~ input.sheet-bash, input.sheet-bash:checked ~ input.sheet-leth, input.sheet-leth:checked ~ input.sheet-agg, input.sheet-agg:checked ~ input.sheet-blank, input.sheet-blank:checked ~ input.sheet-empty { z-index: 103; margin-top: -10px; } .charsheet .sheet-healthboxcontainer{ float: left; } .charsheet .sheet-willpowercontainer{ text-align: center; } .charsheet .sheet-zeroh + span::before{ background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } .charsheet .sheet-touchstone{ float: none !important; } .charsheet .sheet-harmony{ text-align: center; } .charsheet .sheet-integrity{ text-align: center; } .charsheet .sheet-triggers input[type=text]{ width: 70%; } .charsheet input[type=number]{ border: none; border-radius: 0px; border-bottom: 1px black solid; height: 1em; width: 3em !important; -moz-appearance: textfield; padding: 0px; } .charsheet .sheet-hbspace{ display: block; float: left; margin-right: 2.5%; margin-left: 2.5%; } .charsheet .sheet-woundpen h4{ display: block; float: right; margin-right: 5.5%; } .charsheet .sheet-wwform{ width: 20%; float: left; } .charsheet .sheet-wwformnotes{ text-align: right; border-top: 1px solid grey; height: 340px; } .charsheet input.sheet-armorfield{ width: 3em !important; height: 1em; border: none; border-bottom: 1px solid black; border-radius: 0%; } .charsheet .sheet-page2att{ height: 80px; } .charsheet .sheet-totemstats .sheet-col{ text-align: right; } .charsheet .sheet-totemstats input[type=text], .charsheet .sheet-giftsrites input[type=text]{ float: left; width: 63%; } .charsheet .sheet-giftsrites input[type=text]{ margin-bottom: 5px; } .charsheet .sheet-gift{ border: black 1px solid; } .charsheet input.sheet-expander + span::before{ border: none; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%), linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } .charsheet input.sheet-expander:checked + span::before{ background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } .charsheet div.sheet-facets{ display: none; } .charsheet input.sheet-facets:checked ~ div.sheet-facets{ display: block; height: 110px; } .charsheet .sheet-facetinfo{ float: right; } .charsheet .sheet-facets textarea{ height: 80px; width: 94%; border: 1px black solid; border-radius: 0%; resize: none; margin-left: 1%; } .charsheet select{ border: 1px solid black; width: 4em; height: 2em; padding: 0px; margin-bottom: 0px; margin-left: 1%; border-radius: 0%; } .charsheet select.sheet-tab{ border: 1px solid black; height: 2em; padding: 0px; margin-bottom: 0px; margin-left: 1%; border-radius: 0%; } .charsheet table{ border-top: 1px solid black; border-left: 1px solid black; display: inline-block; } .charsheet tr{ border-bottom: 1px solid black; } .charsheet td{ border-right: 1px solid black; } .charsheet td input[type=number]{ border:none; border-radius: 0%; } .charsheet td input[type=text]{ border:none; border-radius: 0%; } .charsheet td select{ border: none; width: 3em; } .charsheet .sheet-armorinfo{ display: inline-block; } .charsheet .sheet-armorinfo input[type=text]{ border-radius: 0%; border: none; border-bottom: 1px solid black; height: 1em; } .charsheet .sheet-page4 textarea{ border-radius: 0%; border: 1px solid black; resize: none; width: 100%; } .charsheet .sheet-description input[type=text]{ width: 60%; }

The resistance <div class="sheet-col"> needs to be within the parent element <div class="sheet-3colrow">.  I also added  display:inline-block ; to the .sheet-merits class. IMO, using the default css classes provided by roll20 ie ".sheet-3colrow", ".sheet-col", etc. can be a real pain with anything but very simple layouts.  There's been a big push for css-grid and/or flexbox that greatly improves sheet authors control over the layout. That said, I'm not sure if you care how (size, defense, initiative, speed, armor) align vertically compared to the attribute fields... but this is a great use-case for css-grid which basically allows you to create a grid layout and include sub-grids and/or flex based elements within the grid/sub-grids.   Try this; HTML(btw:you can safely remove "sheet-" from all your html since roll20 automatically adds it.  I've left it here since some authors like to include it as a matter or personal taste.) <div class="sheet-3colrow"> <div class="sheet-col"> Name: <input type="text" name="attr_name"> </div> <div class="sheet-col"> Virtue: <input type="text" name="attr_virtue"> </div> <div class="sheet-col"> Type: <select name="attr_ephtype"> <option value="angel">Angel</option> <option value="fae">Fae</option> <option value="ghost">Ghost</option> <option value="goetia">Goetia</option> <option value="spirit">Spirit</option> </select> </div> </div> <div class="sheet-3colrow"> <div class="sheet-col"> Player: <input type="text" name="attr_player"> </div> <div class="sheet-col"> Vice: <input type="text" name="attr_vice"> </div> <div class="sheet-col"> Rank: <input type="number" name="attr_rank" min="0" max="10"> </div> </div> <div class="sheet-3colrow"> <div class="sheet-col"> Concept:<input type="text" name="attr_concept"> </div> <div class="sheet-col"> Choir: <input type="text" name="attr_choir"> </div> <div class="sheet-col"> Descant: <input type="text" name="attr_descant"> </div> </div> <div class="sheet-3colrow"> <h2>Attributes</h2> <div class="sheet-col"> <h4>Power</h4> <div class="sheet-dots"><input type="radio" name="attr_power" value="1" checked="checked"><span></span> <input type="radio" name="attr_power" value="2"><span></span> <input type="radio" name="attr_power" value="3"><span></span> <input type="radio" name="attr_power" value="4"><span></span> <input type="radio" name="attr_power" value="5"><span></span> <input type="radio" name="attr_power" value="6"><span></span> <input type="radio" name="attr_power" value="7"><span></span> <input type="radio" name="attr_power" value="8"><span></span> <input type="radio" name="attr_power" value="9"><span></span> <input type="radio" name="attr_power" value="10"><span></span> <input type="radio" name="attr_power" value="11"><span></span> <input type="radio" name="attr_power" value="12"><span></span> <input type="radio" name="attr_power" value="13"><span></span> <input type="radio" name="attr_power" value="14"><span></span> <input type="radio" name="attr_power" value="15"><span></span> </div> </div> <div class="sheet-col"> P: <input type="number" name="attr_power"> </div> <!-- removed unless needed as a kludge for vertical alignment <div class="sheet-col"> </div> --> <div class="sheet-3colrow"> <div class="sheet-col"> <h4>Finesse</h4> <div class="sheet-dots"><input type="radio" name="attr_finesse" value="1" checked="checked"><span></span> <input type="radio" name="attr_finesse" value="2"><span></span> <input type="radio" name="attr_finesse" value="3"><span></span> <input type="radio" name="attr_finesse" value="4"><span></span> <input type="radio" name="attr_finesse" value="5"><span></span> <input type="radio" name="attr_finesse" value="6"><span></span> <input type="radio" name="attr_finesse" value="7"><span></span> <input type="radio" name="attr_finesse" value="8"><span></span> <input type="radio" name="attr_finesse" value="9"><span></span> <input type="radio" name="attr_finesse" value="10"><span></span> <input type="radio" name="attr_finesse" value="11"><span></span> <input type="radio" name="attr_finesse" value="12"><span></span> <input type="radio" name="attr_finesse" value="13"><span></span> <input type="radio" name="attr_finesse" value="14"><span></span> <input type="radio" name="attr_finesse" value="15"><span></span> </div> </div> <div class="sheet-col"> F: <input type="number" name="attr_finesse"> <br> </div> <div class="sheet-col" style=" float: right;position: relative;top: -20px;"> <h4>Size:</h4> <input type="number" name="attr_size"> <br> <h4>Defense:</h4> <input type="number" name="attr_defense"> <br> <h4>Initiative:</h4> <input type="number" name="attr_initmod"> <br> <h4>Speed:</h4> <input type="number" name="attr_speed"> <br> <h4>Armor:</h4> <input type="text" name="attr_armor" class="sheet-armorfield" style="float: none;"> </div> </div> </div> <div class="sheet-3colrow" style="clear: revert;"> <div class="sheet-col"> <h4>Resistance</h4> <div class="sheet-dots"><input type="radio" name="attr_resistance" value="1" checked="checked"><span></span> <input type="radio" name="attr_resistance" value="2"><span></span> <input type="radio" name="attr_resistance" value="3"><span></span> <input type="radio" name="attr_resistance" value="4"><span></span> <input type="radio" name="attr_resistance" value="5"><span></span> <input type="radio" name="attr_resistance" value="6"><span></span> <input type="radio" name="attr_resistance" value="7"><span></span> <input type="radio" name="attr_resistance" value="8"><span></span> <input type="radio" name="attr_resistance" value="9"><span></span> <input type="radio" name="attr_resistance" value="10"><span></span> <input type="radio" name="attr_resistance" value="11"><span></span> <input type="radio" name="attr_resistance" value="12"><span></span> <input type="radio" name="attr_resistance" value="13"><span></span> <input type="radio" name="attr_resistance" value="14"><span></span> <input type="radio" name="attr_resistance" value="15"><span></span> </div> </div> <div class="sheet-col"> R: <input type="number" name="attr_resistance"> </div> </div> <hr> Merits: <div style="width: 65%; margin-left: .9%; border-left: 1px solid #ddd; float: left;"> <h2>Other Traits</h2> <div class="sheet-2colrow"> <div class="sheet-col"> <h3>Powers Lists</h3> <div class="sheet-merits"> <input type="text" name="attr_monpowerslist1"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist1dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist1dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist1dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist1dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist1dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist1dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist2"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist2dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist2dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist2dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist2dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist2dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist2dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist3"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist3dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist3dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist3dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist3dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist3dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist3dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist4"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist4dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist4dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist4dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist4dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist4dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist4dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist5"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist5dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist5dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist5dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist5dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist5dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist5dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist6"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist6dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist6dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist6dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist6dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist6dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist6dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist7"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist7dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist7dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist7dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist7dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist7dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist7dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist8"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist8dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist8dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist8dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist8dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist8dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist8dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist9"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist9dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist9dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist9dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist9dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist9dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist9dots" value="5"><span></span> </div> <input type="text" name="attr_monpowerslist10"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monpowerslist10dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monpowerslist10dots" value="1"><span></span> <input type="radio" name="attr_monpowerslist10dots" value="2"><span></span> <input type="radio" name="attr_monpowerslist10dots" value="3"><span></span> <input type="radio" name="attr_monpowerslist10dots" value="4"><span></span> <input type="radio" name="attr_monpowerslist10dots" value="5"><span></span> </div> </div> <br> <h3>Merits</h3> <div class="sheet-merits"> <input type="text" name="attr_monmerit1"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit1dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit1dots" value="1"><span></span> <input type="radio" name="attr_monmerit1dots" value="2"><span></span> <input type="radio" name="attr_monmerit1dots" value="3"><span></span> <input type="radio" name="attr_monmerit1dots" value="4"><span></span> <input type="radio" name="attr_monmerit1dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit2"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit2dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit2dots" value="1"><span></span> <input type="radio" name="attr_monmerit2dots" value="2"><span></span> <input type="radio" name="attr_monmerit2dots" value="3"><span></span> <input type="radio" name="attr_monmerit2dots" value="4"><span></span> <input type="radio" name="attr_monmerit2dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit3"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit3dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit3dots" value="1"><span></span> <input type="radio" name="attr_monmerit3dots" value="2"><span></span> <input type="radio" name="attr_monmerit3dots" value="3"><span></span> <input type="radio" name="attr_monmerit3dots" value="4"><span></span> <input type="radio" name="attr_monmerit3dots" value="5"><span></span> </div> <input type="text" name="attr_monmonmerit4"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit4dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit4dots" value="1"><span></span> <input type="radio" name="attr_monmerit4dots" value="2"><span></span> <input type="radio" name="attr_monmerit4dots" value="3"><span></span> <input type="radio" name="attr_monmerit4dots" value="4"><span></span> <input type="radio" name="attr_monmerit4dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit5"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit5dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit5dots" value="1"><span></span> <input type="radio" name="attr_monmerit5dots" value="2"><span></span> <input type="radio" name="attr_monmerit5dots" value="3"><span></span> <input type="radio" name="attr_monmerit5dots" value="4"><span></span> <input type="radio" name="attr_monmerit5dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit6"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit6dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit6dots" value="1"><span></span> <input type="radio" name="attr_monmerit6dots" value="2"><span></span> <input type="radio" name="attr_monmerit6dots" value="3"><span></span> <input type="radio" name="attr_monmerit6dots" value="4"><span></span> <input type="radio" name="attr_monmerit6dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit7"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit7dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit7dots" value="1"><span></span> <input type="radio" name="attr_monmerit7dots" value="2"><span></span> <input type="radio" name="attr_monmerit7dots" value="3"><span></span> <input type="radio" name="attr_monmerit7dots" value="4"><span></span> <input type="radio" name="attr_monmerit7dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit8"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit8dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit8dots" value="1"><span></span> <input type="radio" name="attr_monmerit8dots" value="2"><span></span> <input type="radio" name="attr_monmerit8dots" value="3"><span></span> <input type="radio" name="attr_monmerit8dots" value="4"><span></span> <input type="radio" name="attr_monmerit8dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit9"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit9dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit9dots" value="1"><span></span> <input type="radio" name="attr_monmerit9dots" value="2"><span></span> <input type="radio" name="attr_monmerit9dots" value="3"><span></span> <input type="radio" name="attr_monmerit9dots" value="4"><span></span> <input type="radio" name="attr_monmerit9dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit10"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit10dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit10dots" value="1"><span></span> <input type="radio" name="attr_monmerit10dots" value="2"><span></span> <input type="radio" name="attr_monmerit10dots" value="3"><span></span> <input type="radio" name="attr_monmerit10dots" value="4"><span></span> <input type="radio" name="attr_monmerit10dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit11"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit11dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit11dots" value="1"><span></span> <input type="radio" name="attr_monmerit11dots" value="2"><span></span> <input type="radio" name="attr_monmerit11dots" value="3"><span></span> <input type="radio" name="attr_monmerit11dots" value="4"><span></span> <input type="radio" name="attr_monmerit11dots" value="5"><span></span> </div> <input type="text" name="attr_monmerit12"> <div class="sheet-dots"> <input type="radio" class="sheet-zero" name="attr_monmerit12dots" value="0" checked="checked"><span></span> <input type="radio" name="attr_monmerit12dots" value="1"><span></span> <input type="radio" name="attr_monmerit12dots" value="2"><span></span> <input type="radio" name="attr_monmerit12dots" value="3"><span></span> <input type="radio" name="attr_monmerit12dots" value="4"><span></span> <input type="radio" name="attr_monmerit12dots" value="5"><span></span> </div> </div> CSS (btw:I removed .charsheet from the css since it's automatically added by roll20) .sheet-merits { display: inline-block; } .sheet-3colrow .sheet-col { width: calc(33% - 21px); margin-right: 30px; vertical-align: text-bottom; } input.sheet-page1:checked~div.sheet-page1, input.sheet-page2:checked~div.sheet-page2, input.sheet-page3:checked~div.sheet-page3, input.sheet-page4:checked~div.sheet-page4 { display: block; border-top: 1px black solid; } div.sheet-page1, div.sheet-page2, div.sheet-page3, div.sheet-page4 { display: none; } div.sheet-type { display: none; float: left; } input.sheet-tab { display: none; float: left; } input[type=radio]+label { content: ''; border: solid 1px black; background: white; color: black; font-weight: bold; width: 10%; text-align: center; padding: 0%; float: left; border-radius: 10% 10% 0% 0%; margin-bottom: -1px; } input[type=radio]:hover+label { background: gray; } input[type=radio]:checked+label { border-bottom: 1px white solid; } div.sheet-page1, div.sheet-page2 { display: none; } .sheet-col input[type=text] { width: 75%; float: right; border: none; border-radius: 0%; border-bottom: 1px black solid; height: 1em; } h2 { text-align: center; } h4 { float: left; } .sheet-dots { float: right; } h3 { text-align: center; } .sheet-skillnote { text-align: center; font-style: italic; } .sheet-merits input[type="text"] { float: left; width: 63%; height: 1.5em !important; } .sheet-tells input[type="text"] { float: left; width: 100%; height: 1.5em !important; } /* Hide actual dot/checkbox */ input[type="radio"], input[type="checkbox"] { position: absolute; opacity: 0; width: 10px; cursor: pointer; z-index: 1; } /* Styles common to fake dot and checkbox */ input[type="radio"]+span::before, input[type="checkbox"]+span::before { border: solid 1px black; line-height: 10px; display: inline-block; vertical-align: middle; background: white; } /* Styles unique to fake dot (checked or left of checked) */ input[type="radio"]+span::before { background: black; content: ''; width: 10px; height: 10px; font-size: 36px; border-radius: 50%; } /* Styles unique to fake checkbox (unchecked) */ input[type="checkbox"]+span::before { position: relative; content: ""; width: 10px; height: 10px; } /* Styles unique to fake checkbox (checked) */ input[type="checkbox"]:checked+span::before { background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%); } /* Remove dot from all radios _after_ selected one */ input[type="radio"]:checked~input[type="radio"]+span::before { background: white; } input.sheet-zero:checked+span::before { opacity: 0; } input.sheet-zero:hover+span::before { opacity: 1; } input.sheet-zero+span::before { font-size: 12px; content: ""; opacity: 0.25; background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%); } .sheet-aspcon textarea { height: 50px; width: 100%; border: 1px solid black; border-radius: 0%; resize: none; } .sheet-aspcon textarea:focus { outline: none; } .sheet-healthboxcontainer .sheet-healthbox+span::before { border-radius: 0%; display: none; background: white; } .sheet-healthboxcontainer .sheet-healthbox:checked+span::before { display: inline-block; } .sheet-healthboxcontainer .sheet-bash+span::before { background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%); } .sheet-healthboxcontainer .sheet-leth+span::before { background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%); } .sheet-healthboxcontainer .sheet-agg+span::before { background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%); } .sheet-healthboxcontainer .sheet-blank+span::before { background: black; } .sheet-healthboxcontainer .sheet-healthbox { z-index: 101; } .sheet-healthboxcontainer .sheet-empty { z-index: 102; } input.sheet-empty:checked~input.sheet-bash, input.sheet-bash:checked~input.sheet-leth, input.sheet-leth:checked~input.sheet-agg, input.sheet-agg:checked~input.sheet-blank, input.sheet-blank:checked~input.sheet-empty { z-index: 103; margin-top: -10px; } .sheet-healthboxcontainer { float: left; } .sheet-willpowercontainer { text-align: center; } .sheet-zeroh+span::before { background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%); } .sheet-touchstone { float: none !important; } .sheet-harmony { text-align: center; } .sheet-integrity { text-align: center; } .sheet-triggers input[type=text] { width: 70%; } input[type=number] { border: none; border-radius: 0px; border-bottom: 1px black solid; height: 1em; width: 3em !important; -moz-appearance: textfield; padding: 0px; } .sheet-hbspace { display: block; float: left; margin-right: 2.5%; margin-left: 2.5%; } .sheet-woundpen h4 { display: block; float: right; margin-right: 5.5%; } .sheet-wwform { width: 20%; float: left; } .sheet-wwformnotes { text-align: right; border-top: 1px solid grey; height: 340px; } input.sheet-armorfield { width: 3em !important; height: 1em; border: none; border-bottom: 1px solid black; border-radius: 0%; } .sheet-page2att { height: 80px; } .sheet-totemstats .sheet-col { text-align: right; } .sheet-totemstats input[type=text], .sheet-giftsrites input[type=text] { float: left; width: 63%; } .sheet-giftsrites input[type=text] { margin-bottom: 5px; } .sheet-gift { border: black 1px solid; } input.sheet-expander+span::before { border: none; background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%), linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%); } input.sheet-expander:checked+span::before { background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%); } div.sheet-facets { display: none; } input.sheet-facets:checked~div.sheet-facets { display: block; height: 110px; } .sheet-facetinfo { float: right; } .sheet-facets textarea { height: 80px; width: 94%; border: 1px black solid; border-radius: 0%; resize: none; margin-left: 1%; } select { border: 1px solid black; width: 4em; height: 2em; padding: 0px; margin-bottom: 0px; margin-left: 1%; border-radius: 0%; } select.sheet-tab { border: 1px solid black; height: 2em; padding: 0px; margin-bottom: 0px; margin-left: 1%; border-radius: 0%; } table { border-top: 1px solid black; border-left: 1px solid black; display: inline-block; } tr { border-bottom: 1px solid black; } td { border-right: 1px solid black; } td input[type=number] { border: none; border-radius: 0%; } td input[type=text] { border: none; border-radius: 0%; } td select { border: none; width: 3em; } .sheet-armorinfo { display: inline-block; } .sheet-armorinfo input[type=text] { border-radius: 0%; border: none; border-bottom: 1px solid black; height: 1em; } .sheet-page4 textarea { border-radius: 0%; border: 1px solid black; resize: none; width: 100%; } .sheet-description input[type=text] { width: 60%; }

Vince , thanks for you help! I probably do something wrong in copyiing, as got only partial solution on the Attributes section. It still more than enough for me to let it simply be.  And if I can use your knowledge - I have a slight problem with Selection input - it does not take the window size of largest option - so the writings in it are shorten. Here are instances of it...

Maybe double check the copy/paste of the html.  It looks like resistance is still in it's own row... compare your similar section of code to this; <div class="sheet-3colrow"> <h2>Attributes</h2> <div class="sheet-col"> <h4>Power</h4> <div class="sheet-dots"><input type="radio" name="attr_power" value="1" checked="checked"><span></span> <input type="radio" name="attr_power" value="2"><span></span> <input type="radio" name="attr_power" value="3"><span></span> <input type="radio" name="attr_power" value="4"><span></span> <input type="radio" name="attr_power" value="5"><span></span> <input type="radio" name="attr_power" value="6"><span></span> <input type="radio" name="attr_power" value="7"><span></span> <input type="radio" name="attr_power" value="8"><span></span> <input type="radio" name="attr_power" value="9"><span></span> <input type="radio" name="attr_power" value="10"><span></span> <input type="radio" name="attr_power" value="11"><span></span> <input type="radio" name="attr_power" value="12"><span></span> <input type="radio" name="attr_power" value="13"><span></span> <input type="radio" name="attr_power" value="14"><span></span> <input type="radio" name="attr_power" value="15"><span></span> </div> </div> <div class="sheet-col"> P: <input type="number" name="attr_power"> </div> <!-- removed unless needed as a kludge for vertical alignment <div class="sheet-col"> </div> --> <div class="sheet-3colrow"> <div class="sheet-col"> <h4>Finesse</h4> <div class="sheet-dots"><input type="radio" name="attr_finesse" value="1" checked="checked"><span></span> <input type="radio" name="attr_finesse" value="2"><span></span> <input type="radio" name="attr_finesse" value="3"><span></span> <input type="radio" name="attr_finesse" value="4"><span></span> <input type="radio" name="attr_finesse" value="5"><span></span> <input type="radio" name="attr_finesse" value="6"><span></span> <input type="radio" name="attr_finesse" value="7"><span></span> <input type="radio" name="attr_finesse" value="8"><span></span> <input type="radio" name="attr_finesse" value="9"><span></span> <input type="radio" name="attr_finesse" value="10"><span></span> <input type="radio" name="attr_finesse" value="11"><span></span> <input type="radio" name="attr_finesse" value="12"><span></span> <input type="radio" name="attr_finesse" value="13"><span></span> <input type="radio" name="attr_finesse" value="14"><span></span> <input type="radio" name="attr_finesse" value="15"><span></span> </div> </div> <div class="sheet-col"> F: <input type="number" name="attr_finesse"> <br> </div> <div class="sheet-col" style=" float: right;position: relative;top: -20px;"> <h4>Size:</h4> <input type="number" name="attr_size"> <br> <h4>Defense:</h4> <input type="number" name="attr_defense"> <br> <h4>Initiative:</h4> <input type="number" name="attr_initmod"> <br> <h4>Speed:</h4> <input type="number" name="attr_speed"> <br> <h4>Armor:</h4> <input type="text" name="attr_armor" class="sheet-armorfield" style="float: none;"> </div> </div> </div> <div class="sheet-3colrow" style="clear: revert;"> <div class="sheet-col"> <h4>Resistance</h4> <div class="sheet-dots"><input type="radio" name="attr_resistance" value="1" checked="checked"><span></span> <input type="radio" name="attr_resistance" value="2"><span></span> <input type="radio" name="attr_resistance" value="3"><span></span> <input type="radio" name="attr_resistance" value="4"><span></span> <input type="radio" name="attr_resistance" value="5"><span></span> <input type="radio" name="attr_resistance" value="6"><span></span> <input type="radio" name="attr_resistance" value="7"><span></span> <input type="radio" name="attr_resistance" value="8"><span></span> <input type="radio" name="attr_resistance" value="9"><span></span> <input type="radio" name="attr_resistance" value="10"><span></span> <input type="radio" name="attr_resistance" value="11"><span></span> <input type="radio" name="attr_resistance" value="12"><span></span> <input type="radio" name="attr_resistance" value="13"><span></span> <input type="radio" name="attr_resistance" value="14"><span></span> <input type="radio" name="attr_resistance" value="15"><span></span> </div> </div> <div class="sheet-col"> R: <input type="number" name="attr_resistance"> </div> </div> If you want, post a link to your html and css (gist, pastebin, or similar) and I can check/fix the alignment issues with attributes. You can adjust the width of your selects, try updating your css for select with a wider width. select {     width: 8em; }

Copying the new stat HTML block - effect is the same. :( Also, adding this short Select class in CSS do not seems to solve the problem. 

Karol L. said: Copying the new stat HTML block - effect is the same. :( Also, adding this short Select class in CSS do not seems to solve the problem.  If you can post a link (probably too big for roll20) to your html and css, I'll have a look.

Now version of my CoD SheetsPack on Dropbox -&nbsp; <a href="https://www.dropbox.com/sh/8b9b59kbfpan80i/AAA9fQ1B1o6PgxVL6hGAIu9Ha?dl=0" rel="nofollow">https://www.dropbox.com/sh/8b9b59kbfpan80i/AAA9fQ1B1o6PgxVL6hGAIu9Ha?dl=0</a> I will only point this - I make 4 subsheets on it with variables conventions: Werewolf / Uratha sheets - variables starts with ' ur- ' ( Page 1-4 )&nbsp; Wolf-Blooded / Mortal sheet - variables with ' wb- ' ( Page 5, but not everything with correct variables prefixes, here. ) Ephemeral Beings sheets ( ghosts, spirits, angels, etc. ) - variables with ' eph- ' ( Page 6, it's here we have Attributes problem. )&nbsp; Horror sheets ( various urban legends monsters and WtF Hosts ) - variables with ' ho- ' ( Page 7 ) Other Monsters sheet ( for vampires, mages, changelings, etc. any other 'major' monster race in CoD ) - variables with 'mon- ' ( Pages 8 &amp; 9 ) I wanted to make that only shows Pages related to template edited now show up - but general functionalities were having priority on limiting viewing to only proper sheets in window. So, for now, whole CharSheets Pack is showing every Page ( beside 2-4 ) on the long vertical column - you just scroll to the sheet you need to edit for particular character you now made.