How to fix messy looking sheet?

Hey all, been a while since I last posted on here but I've been working on a character sheet for a homebrew system for a while now and have ran into an issue with several of the text input boxes just going wherever they want and I'm not sure how to fix it. This is what the part of the sheet I'm having the problem with looks like: The issue is with those weird gaps at the bottom (marked with red), I'm trying to make it nice and uniformly spaced like in the "damage resist" or "regeneration" sections. When I go back and look at whats different between the text in either areas there doesn't seem to be many differences and when changed to be identical nothing is fixed. However when I copy and paste the "damage resist" or "regeneration" sections in in place of the movement speed or initiative everything works just fine. This really has me stumped. This is the bit in question ( the problem area is emboldened ) <br> <div class="sheet-table sheet-pc-health"> <div class="sheet-table-row"> <div class="sheet-table-data-center" style="width:50%;vertical-align:top;"> <div class="sheet-table"> <span class="sheet-table-name">Stamina, Health and Magicka</span> <div class="sheet-table-row"> <span class="sheet-table-header">Type</span> <span class="sheet-table-header">Current</span> <span class="sheet-table-header" style="vertical-align:middle;font-size:150%;">/</span> <span class="sheet-table-header">Max</span> </div> <div class="sheet-table-row"> <span class="sheet-table-row-name">Stamina</span> <span class="sheet-table-data-center"><input type="number" title="SP" name="attr_SP" value="0"></span> <span class="sheet-table-data-center" style="vertical-align:middle;font-size:150%;"><b>/</b></span> <span class="sheet-table-data-center"><input title="SP|max" type="number" name="attr_SP_max" value="@{total_stamina}" disabled></span> </div> <div class="sheet-table-row"> <span class="sheet-table-row-name">Health</span> <span class="sheet-table-data-center"><input type="number" title="HP" name="attr_HP" value="0"></span> <span class="sheet-table-data-center" style="vertical-align:middle;font-size:150%;"><b>/</b></span> <span class="sheet-table-data-center"><input title="HP|max" type="number" name="attr_HP_max" value="@{total_health}" disabled></span> </div> <div class="sheet-table-row"> <span class="sheet-table-row-name">Magicka</span> <span class="sheet-table-data-center"><input type="number" title="resolve" name="attr_resolve" value="0"></span> <span class="sheet-table-data-center" style="vertical-align:middle;font-size:150%;"><b>/</b></span> <span class="sheet-table-data-center"><input title="resolve|max" type="number" name="attr_resolve_max" value="@{total_magika}" disabled></span> </div> </div> <div class="sheet-table"> <span class="sheet-table-name">Dodge</span> <div class="sheet-table-row"> <span class="sheet-table-header">Total</span> <span class="sheet-table-header">Ability</span> <span class="sheet-table-header">Race</span> <span class="sheet-table-header">Armor</span> <span class="sheet-table-header">Misc</span> </div> <div class="sheet-table-row"> <span class="sheet-table-data-center"><input title="Total_Dodge" type="number" name="attr_dodge_total" value="[[floor(10 + @{dodge_ability} + @{dodge_race} + @{dodge_armor} + @{dodge_misc})]]" disabled></span> <span class="sheet-table-data-center"><input title="Ability" type="number" name="attr_dodge_ability" value="[[@{AGI-mod}]]" disabled></span> <span class="sheet-table-data-center"><input title="Race" type="number" name="attr_dodge_race" value="0"></span> <span class="sheet-table-data-center"><input title="Armor" type="number" name="attr_dodge_armor" value="@{armor-pen-total}" disabled></span> <span class="sheet-table-data-center"><input title="Misc" type="number" name="attr_dodge_misc" value="0"></span> </div> </div> </div> <div class="sheet-table-data-center" style="width:50%;vertical-align:top;"> <div class="sheet-table"> <span class="sheet-table-name">Damage Resist</span> <div class="sheet-table-row"> <span class="sheet-table-header">Resist Type</span> <span class="sheet-table-header">Total</span> <span class="sheet-table-header">Race</span> <span class="sheet-table-header">Armor</span> <span class="sheet-table-header">Misc</span> </div> <div class="sheet-table-row"> <span class="sheet-table-row-name">Physical</span> <span class="sheet-table-data-center" style="text-align:center;"><input title="total-dr" type="number" name="attr_EAC" value="(@{EAC-race} + @{EAC-armor} + @{EAC-misc})" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="race-dr" type="number" name="attr_EAC-race" value="0"></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="armor-dr" type="number" name="attr_EAC-armor" value="(@{armor-eacbonus1} * @{armor-equipped1}) + (@{armor-eacbonus2} * @{armor-equipped2}) + (@{armor-eacbonus3} * @{armor-equipped3}) + (@{armor-eacbonus4} * @{armor-equipped4}) + (@{armor-eacbonus5} * @{armor-equipped5})" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="misc-dr" type="number" name="attr_EAC-misc" value="0"></span> </div> <div class="sheet-table-row"> <span class="sheet-table-row-name">Magic</span> <span class="sheet-table-data-center" style="text-align:center;"><input title="total-mr" type="number" name="attr_KAC" value="(@{KAC-race} + @{KAC-armor} + @{KAC-misc})" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="race-mr" type="number" name="attr_KAC-race" value="0"></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="armor-mr" type="number" name="attr_KAC-armor" value="(@{armor-kacbonus1} * @{armor-equipped1}) + (@{armor-kacbonus2} * @{armor-equipped2}) + (@{armor-kacbonus3} * @{armor-equipped3}) + (@{armor-kacbonus4} * @{armor-equipped4}) + (@{armor-kacbonus5} * @{armor-equipped5})" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="misc-mr" type="number" name="attr_KAC-misc" value="0"></span> </div> </div> <div class="sheet-table-data-center" style="width:50%;vertical-align:top;"> <div class="sheet-table"> <span class="sheet-table-name">Regeneration</span> <div class="sheet-table-row"> <span class="sheet-table-header">Regen Type</span> <span class="sheet-table-header">Total</span> <span class="sheet-table-header">Race</span> <span class="sheet-table-header">Ability</span> <span class="sheet-table-header">Misc</span> </div> <div class="sheet-table-row"> <span class="sheet-table-row-name">Stamina</span> <span class="sheet-table-data-center" style="text-align:center;"><input title="total stamina regen" type="number" name="attr_stam-regen" value="round((@{ability-stam} + @{misc-stam}) + (@{total_stamina} * @{race-stam} * .01))" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="race stamina regen" type="number" name="attr_race-stam" value="0"></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="ability stamina regen" type="number" name="attr_ability-stam" value="@{END-mod}" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="misc stamina regen" type="number" name="attr_misc-stam" value="0"></span> </div> <div class="sheet-table-row"> <span class="sheet-table-row-name">Magicka</span> <span class="sheet-table-data-center" style="text-align:center;"><input title="total magica regen" type="number" name="attr_mag-regen" value="round((@{ability-mag} + @{misc-mag}) + (@{total_magika} * @{race-mag} * .01))" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="race magica regen" type="number" name="attr_race-mag" value="0"></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="ability magica regen" type="number" name="attr_ability-mag" value="@{WIS-mod}" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="misc magica regen" type="number" name="attr_misc-mag" value="0"></span> </div> </div> </div> </div> </div> </div> <br> <div class="sheet-table-data-center" style="width:50%;vertical-align:top;"> <div class="sheet-table"> <span class="sheet-table-name">Other Statistics</span> <div class="sheet-table-row"> <span class="sheet-table-header"></span> <span class="sheet-table-header">Base</span> <span class="sheet-table-header">Misc</span> <span class="sheet-table-header">Walk</span> <span class="sheet-table-header">Run</span> <span class="sheet-table-header">Swim</span> <span class="sheet-table-header">Race</span> <span class="sheet-table-header">Climb</span> <span class="sheet-table-header">Race</span> </div> <div class="sheet-table-row"> <span class="sheet-table-row-name">Movement Speed</span> <span class="sheet-table-data-center" style="text-align:center;"><input title="speed base" type="number" name="attr_speed-base" value="0"></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="speed misc" type="number" name="attr_speed-misc" value="0"></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="speed walk" type="number" name="attr_speed-walk" value="((@{speed-base} + @{speed-misc}) + @{encumbrance})" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="speed run" type="number" name="attr_speed-run" value="[[(@{speed-walk} * (@{AGI-mod} / 2))]]" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="speed swim" type="number" name="attr_speed-swim" value="(@{speed-walk} - 15) + @{swim-race}" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="speed swim race" type="number" name="attr_swim-race" value="0"></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="speed climb" type="number" name="attr_speed-climb" value="(@{speed-walk} - 15) + @{climb-race}" disabled></span> <span class="sheet-table-data-center" style="text-align:center;"><input title="speed climb race" type="number" name="attr_climb-race" value="0"></span> </div> <div class="sheet-table-row"> <span class="sheet-table-header"></span> <span class="sheet-table-header"></span> <span class="sheet-table-header">Total</span> <span class="sheet-table-header">AGI</span> <span class="sheet-table-header">Misc</span> <span class="sheet-table-header" style="width:50%;"></span> </div> <div class="sheet-table-row"> <span class="sheet-table-header" style="width:20%;"></span> <span class="sheet-table-row-name" style="width:5%;"><button class="sheet-text-button" title="Roll-for-initiative" type="roll" name="roll_Roll-for-initiative" value="&{template:default} {{name=@{character_name}'s Initiative}} {{init=[[ ( [[ @{init} ]] [init] + [[ {(0.01 * [[ @{init} ]] ),0}kh1 ]] [tie-breaker] + 1d20 ) &{tracker} ]] }}">Initiative</button></span> <span class="sheet-table-data-center"><input title="init" type="number" name="attr_init" value="([[@{init-AGI} + @{init-misc}]])" disabled></span> <span class="sheet-table-data-center"><input title="AGI-mod" type="number" name="attr_init-AGI" value="[[round(@{AGI} * .3)]]" disabled></span> <span class="sheet-table-data-center"><input title="init-misc" type="number" name="attr_init-misc" value="0"></span> </div> </div> Any Ideas on how to fix this? All help is appreciated, thank you.

It's hard to tell based on just the html, it's useful to also see the CSS considering that's what governs the styling of a character sheet. But I noticed that in your bolded section you might be missing a closing <div> for either of these that might affect things, unless it happened to fall outside the codeblock you show us. It's also generally a good idea to use as little style elements in the html, and instead move the things into the relevant css class. For example, the divs containing class="sheet-table-data-center" seems all have a  style="width:50%;vertical-align:top;" segment, which could be moved to the sheet-table-data-center css class instead, and you can then just use the class instead of needing to include the style="..." every time. <div class="sheet-table-data-center" style="width:50%;vertical-align:top;"> <div class="sheet-table">

Thank you for the response, I mostly have no idea how the css works so what I have is ripped from the starfinder character sheet (it was the base I used to start making my sheet) and I've been slowly tearing it and the html apart to learn what it does. Far easier to do that with the html tho. As far as what I have in my css area there are 4 chunks that I know do separate stuff, a checkbox section for my spells, a tabs section that I'm working on now, a section I assume deals with the sheet formatting itself and then a section for rolling. Here's the section that I -think- deals with formatting: .sheet-textarea { width: 700px; height:40px } .sheet-center { margin-left:auto; margin-right:auto; } hr { border-color:black; } .sheet-table { display:table; width:100%; } .sheet-small-label { font-size: 85%!important; font-style: italic; font-weight: bold; } .sheet-table-name { display:table-caption; text-align:center; font-weight:bold; color:white; background-color: #000000;; width:100%; } .sheet-table-header { display:table-cell; text-align:center; font-weight:bold; vertical-align:bottom; } .sheet-table-header-left { display:table-cell; text-align:left; font-weight:bold; vertical-align:bottom; } .sheet-table-subheader { display:table-cell; text-align:center; font-size:10px; vertical-align:bottom; } .sheet-table-background { background-image: url(""); background-repeat: no-repeat; background-position: center top; } .sheet-table-background1 { background-image: url(""); background-repeat: no-repeat; background-position: right bottom; } .sheet-table-data { display:table-cell; vertical-align:middle; } .sheet-table-data-left { display:table-cell; text-align:left; vertical-align:middle; } .sheet-table-data-right { display:table-cell; text-align:right; vertical-align:middle; } .sheet-table-data-center { display:table-cell; text-align:center; vertical-align:middle; } .sheet-table-row { display:table-row; vertical-align:middle; width:100%; } .sheet-table-row1 { display:table-row; vertical-align:bottom; width:100%; } .sheet-table-row-name { display:table-cell; text-align:center; vertical-align:middle; background-color:transparent; font-weight:bold; } .sheet-table-row1-name { display:table-cell; text-align:center; vertical-align:middle; color:white; background-color:black; font-weight:bold; } .sheet-table-row2-name { display:table-cell; text-align:left; vertical-align:middle; color:white; background-color:black; font-weight:bold; } .sheet-center { text-align:center; } .sheet-label { font-weight:bold; text-align:center; } input[type="number"] { -moz-appearance: textfield; } input[type="text"], select { width:100%; margin:0; } textarea { width:97%; height:50%; } .sheet-text-button { font-size:100%; color:white; background-color:black; border:0px; border-radius: 8px; } button, button:hover, button:active { background-image: none; } Css is still a massive mystery to me. If it'd help I could put the sheet on github or something and link it.