I realize that I am asking two separate questions here, but given my inexperience with HTML and CSS, I get the feeling that they are connected. If nothing else, I am unsure about how to ask one question while ensuring that the answers I get will be compatible with the other.
So, here goes:
I am making a small calculator, which needs to look nice in different window sizes. I have some groupings of buttons that all need to be kept together, while the different groupings are moved around according to the window size. Below is a screenshot of "good behavior":
The content is together with headers, and there are no odd blank spaces.
Then we get the next behavior: upon a small change of window width, some material is moved down, but not the entire div - the header stays:
How do I make the header follow the content down?
Finally, when the window width gets even smaller, the header moves down as well:
This behavior is fine but I'd like the remaining content in the top to take advantage of the extra space and center horizontally. Any idea how? I've had a look at questions such as How do you easily horizontally center a <div> using CSS?, but they all seem to entail increasing the width of the element that I want centered, which breaks the behavior in screenshot #1.
An example of that is seen here:
How do I fix screenshots #2 and #3, without affecting #1?
I have of course also made a fiddle, but I thought screenshots would make the point better:
in it is:
<!DOCTYPE html>
<html>
<head>
<style>
.incbut,.decbut,.rollButton{
background-color:#FF961F;
}
.regular-checkbox{
border-color:#FF961F;
}
body {
background-color:#FCB41B;
color:#753B08;
}
.modifiers{
text-align:left;
min-width:8em;
}
.center{
margin-left:auto;
margin-right:auto;
}
.inputField {
max-width:2em;
border:1px #bababa solid;
vertical-align:middle;
text-align:center;
}
.incbut,.decbut {
border: 1px transparent solid;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
padding: 4px 10px;
position: relative;
width: 2.5em;
}
.rollButton{
border: 1px transparent solid;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
padding: 4px 10px;
position: relative;#FF0000
}
button:active{
background-color:#FF0000;
}
.fieldCol{
float:left;
text-align:center;
max-width=45%;
height:9em;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.incbut,.inputField, .decbut{
min-height:2em;
margin-right:0.5em;
margin-bottom:0.3em;
}
h2{
margin:0.1em;
font-weight:500;
}
h2,button, input{
font-family:inherit;
}
.outputField{
padding:2px;
margin:3px;
border:1px #753B08 solid;
width=2em;
line-height:1.7em;
white-space:nowrap;
}
label {
display: inline;
}
.checkBoxLabel{
margin-left:5px;
font-size:90%;
}
.regular-checkbox {
display: none;
}
.regular-checkbox + label {
border: 3px solid #FF961F;
padding: 9px;
background-color: #FFFFFF;
display: inline-block;
position: relative;
vertical-align:middle;
margin: .1em;
}
.regular-checkbox:checked + label {
border: 3px solid #FF961F;
}
.regular-checkbox:checked + label:after {
content: '\2716';
font-size: 1em;
position: absolute;
top: 0px;
left: 10%;
color: #753B08;
font-weight: 600;
}
.checkboxbox2{
width:8em;
float:left;
}
.colContainer{
text-alignment:center;
}
div.centre{
text-align: left;
width: 17em;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body style="text-align:center;font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;" class="center">
<!--
<div class="colContainer">
<div class="centre">
-->
<section id="bal_attacker" class="fieldCol">
<h2>Attacker:</h2>
<label for="bal_BS1">BS:</label> <br>
<button type="button" id="bal_BS1inc" class="incbut"> + </button>
<input type="number" id="bal_BS1" value="1" class="inputField">
<button type="button" id="bal_BS1dec" class="decbut"> - </button> <br>
<label for="bal_S">S:</label> <br>
<button type="button" id="bal_Sinc" class="incbut"> + </button>
<input type="number" id="bal_S" value="1" class="inputField"/>
<button type="button" id="bal_Sdec" class="decbut"> - </button>
</section>
<section id="bal_defender" class="fieldCol" >
<h2>Defender:</h2>
<label for="bal_T">T:</label> <br>
<button type="button" id="bal_Tinc" class="incbut"> + </button>
<input type="number" id="bal_T" value="1" class="inputField">
<button type="button" id="bal_Tdec" class="decbut"> - </button> <br>
</section>
<!--
</div>
</div>
-->
<div>
<section title="bal_Modifiers" class="modifiers">
<h2 style="text-align:center;">Modifiers:</h2><br>
<span class="checkboxbox2">
<input type="checkbox" id="bal_harmConv" class="regular-checkbox" /><label for="bal_harmConv"></label>
<label for="bal_harmConv" class="checkBoxLabel">Harm. Conv.</label>
</span>
<span class="checkboxbox2">
<input type="checkbox" id="bal_rrToHit" class="regular-checkbox" /><label for="bal_rrToHit"></label>
<label for="bal_rrToHit" class="checkBoxLabel">R.r. to hit</label>
</span>
<span class="checkboxbox2">
<input type="checkbox" id="bal_rrToW" class="regular-checkbox" /><label for="bal_rrToW"></label>
<label for="bal_rrToW" class="checkBoxLabel">R.r. to wound</label>
</span>
<div style="clear: both;"></div>
</section>
<div style="clear: both;"></div>
</body>
</html>
I apologize that this is not quite a minimal working example - I have been trying for some time now to reduce it further, but I seem to break stuff when I try.
