Hey Everyone, I've got a slightly baffling problem with how my css elements are shaking out. The situation is that I have split my character sheet into 2 boxes which will then run side-by-side in two separate columns. This has been working well for me aside from the fact some of the elements in the second box get shifted when the elements in the first box exceed a certain length. The images below show the two boxes in a vertical alignment to demonstrate what is happening better, but the reason why the solution isn't "put them in the same box" is because they will be shifted over, and this problem persists after it has been moved. ^screenshot of preview ^screenshot of filled out sheet You can see here that the 'assets' repeating field goes underneath the 'growth', 'plot points' and 'additional dice' section, but then shunts down the values section and everything below it (offscreen). It's hard to know what the relevent code here is so I'm going to post a link to the sheet as a whole and post the html and css from the 'growth' section to the end of the values section. <a href="https://github.com/abyssalLegate/Cortex-Drama-Sheet" rel="nofollow">https://github.com/abyssalLegate/Cortex-Drama-Sheet</a> HTML: <div class="box2">
<div class="growth-container">
<div class="growth-header">Growth</div>
<div class="growth-menu">d4</div>
<input class="growth-main" type="number" name="attr_growd4">
<div class="growth-menu">d6</div>
<input class="growth-main" type="number" name="attr_growd6">
<div class="growth-menu">d8</div>
<input class="growth-main" type="number" name="attr_growd8">
<div class="growth-menu">d10</div>
<input class="growth-main" type="number" name="attr_growd10">
<div class="growth-menu">d12</div>
<input class="growth-main" type="number" name="attr_growd12">
</div>
<div class="plot-container">
<h4></h4>
<h4 class="plot-header">Plot Points</h4>
<h4></h4>
<input class="plot-main" type="number" name="attr_plot_points">
<h4></h4>
<h4 class="dice-header">Additional Dice</h4>
<input type="checkbox" class="toggle" name="attr_dX_flag" value="1"/>
<textarea class="dice-main" type="text" name="attr_dX" value="0"></textarea>
</div>
<div class="value-container">
<h4 class="value-header">Values</h4>
<h4></h4>
<h4 class="value-header2"></h4>
<h4 class="value-header1">Rating</h4>
<h4 class="value-header1">Current</h4>
<h4 class="value-header1">Statement</h4>
<input type="checkbox" class="toggle" name="attr_duty_flag" value="1"/>
<div class="value-menu">DUTY</div>
<select class="value-main" name="attr_dutybase">
<option value="0" selected>-</option>
<option value="d4">d4</option>
<option value="d6">d6</option>
<option value="d8">d8</option>
<option value="d10">d10</option>
<option value="d12">d12</option>
</select>
<select class="value-main" name="attr_duty">
<option value="0" selected>-</option>
<option value="d4">d4</option>
<option value="d6">d6</option>
<option value="d8">d8</option>
<option value="d10">d10</option>
<option value="d12">d12</option>
</select>
<input class="value-main1" type="text" name="attr_duty_statement">
...
</div> CSS: .sheet-growth-container {
display:grid;
position: relative;
left: 22px;
background: white;
width: 80px;
padding: 10px;
}
.sheet-growth-header {
grid-column: 1 / span 2;
background: #3a7a6b;
color: white;
font-weight: bold;
font-size: 14px;
padding-left: 5px;
}
.sheet-growth-menu {
background: #e6e6e6;
font-weight:bold;
height: 30px;
padding-left: 5px;
padding-right: 5px;
}
/*Growth Section ends here*/
.sheet-plot-container {
display: grid;
position: relative;
left: 122px;
top: -190px;
background: white;
width: 155px;
padding: 10px;
}
.sheet-plot-header {
background: #ebd647;
color: white;
font-weight: bold;
font-size: 14px;
padding-left: 5px;
margin-left: 10px;
}
.sheet-plot-main {
grid-column: 2 /span 1;
font-size: 27px;
text-align: center;
margin-left: 30px;
margin-bottom: 5px;
margin-top: 5px;
}
/*Plot Points and Complications ends here*/
.sheet-dice-header {
grid-column: 2 / span 1;
font-weight: bold;
background: orange;
color: white;
padding-left: 10px;
margin-left: 10px;
}
.sheet-dice-main {
min-width: 120px;
max-width: 120px;
min-height: 72px;
max-height: 72px;
margin-left: 10px;
}
/*dice Section ends here*/
div.sheet-value-container {
display:grid;
background: white;
position: relative;
top: -205px;
width: 770px;
padding: 10px;
}
h4.sheet-value-header {
grid-column: 2 / span 4;
background: #042254;
color: white;
font-weight: bold;
font-size: 14px;
padding-left: 5px;
margin-left: 8px;
}
.sheet-value-header1 {
background: #e6e6e6;
font-weight:bold;
padding-left: 5px;
padding-right: 5px;
}
.sheet-value-header2 {
background: #bfbfbf;
margin-left: 8px;
}
.sheet-value-menu {
background: #e6e6e6;
font-weight: bold;
padding-left: 10px;
padding-right: 5px;
margin-left: 8px;
}
.sheet-value-main {
width: 60px;
margin-left: 5px;
}
.sheet-value-main1 {
width: 545px;
}
/*Values Section ends here*/ I apologise if this is way too much information, but it seems to be quite a broad issue. If people can't help me the quick fix would be to extend the first box by a large amount that a player feasibly won't reach, but I'm kind of curious as to why it's only some elements in this box being affected. Thank you
