All kinds of problems with fieldset

So I am having unusual placement issues when using <fieldset>. I'm obviously not using any kind of best practice (please do tell) for making placement easy. Here is the current issue (see below), i've encountered many as i've tried different strategies just to get the fields to line up one row per line... If i take the last (2nd) selection input away, I get one line per entry just fine... Confused... Suggestions would be appreciated. <div class="div-actions">                 <div class="div-top-band">                     <h3 style="text-align: center;">Action Section</h3>                 </div>                 <div class="div-action-repeating">                     <fieldset class="repeating_actions">                                                      <button type="roll" name="roll_action" class="input-action-roll" value="/em xyz example"></button>                             <select name="attr_action_type" class="input-action-type">                                 <option selected>Attack</option>                                 <option>Attack</option>                                 <option>Spell</option>                                 <option>Action</option>                                 <option>Effect</option>                                 <option>Damage</option>                                 <option>Misc</option>                             </select>                                    <input type="text" name="attr_action_desc" value="" class="input-action-desc" placeholder="Description">                             <input type="number" name="attr_action_numdice" min="1" max="10" class="input-action-numdice" value="1" title = "# Dice" /><br />                             <select name="attr_action_die" class="input-action-die">                                 <option selected>d20</option>                                 <option>d20</option>                                 <option>d12</option>                                 <option>d10</option>                                 <option>d8</option>                                 <option>d6</option>                                 <option>d4</option>                                 <option>d100</option>                             </select>                     </fieldset>                 </div>             </div> .div-actions {   border-radius: 15px 0px 0px 15px;   border-style: groove;   background: #FFFFFF;   width: 602px;   height: 314px;   margin: 1px 5px 4px 5px;   overflow-y:scroll; } .div-top-band {   background-color: #EFEEEA; } .div-action-repeating {   width:580px;   clear: both;   float:left; } .input-action-type {   width: 63px;   height: 20px !important;   padding: 0px;   font-size: 14px;   margin-left: 4px;   margin-top: 1px;   float:left; } .input-action-desc {   width: 120px;   height: 20px !important;   font-size: 14px;   padding:0 px;   margin-left: 4px;   float:left; } .input-action-numdice {   width: 10px;   height: 20px !important;   font-size: 12px;   padding:0 px;   margin-left: 4px;   float:left; } .input-action-die {   width: 50px;   height: 20px !important;   font-size: 14px;   padding:0 px;   margin-left: 4px;   float:left; } .input-action-roll {   padding:0 px;   margin-left: 4px;   float:left; }

You are making the code more complex than it needs to be, but here's your problem: <input type="number" name="attr_action_numdice" min="1" max="10" class="input-action-numdice" value="1" title = "# Dice" /><br /> That <br /> at the end shouldn't be there. You are inserting an unneccessary line break.

Here's a quick pass at simplifying your code: &lt; div class = "actions" &gt; &nbsp; &nbsp; &lt; h3 &gt; Action Section &lt;/ h3 &gt; &nbsp; &nbsp; &lt; fieldset class = "repeating_actions" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "action-repeating" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; button type = "roll" name = "roll_action" class = "action-roll" value = "/em xyz example" &gt;&lt;/ button &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; select name = "attr_action_type" class = "action-type" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option selected hidden readonly &gt; Type &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; Attack &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; Spell &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; Action &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; Effect &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; Damage &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; Misc &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ select &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "text" name = "attr_action_desc" value = "" class = "action-desc" placeholder = "Description" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "number" name = "attr_action_numdice" min = "1" max = "10" class = "action-numdice nospinner" value = "1" title = "# Dice" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; select name = "attr_action_die" class = "action-die" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option selected hidden readonly &gt; Die &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; d20 &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; d12 &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; d10 &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; d8 &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; d6 &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; d4 &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; option &gt; d100 &lt;/ option &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ select &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &lt;/ fieldset &gt; &lt;/ div &gt; Notice I've moved a div inside the fieldset (that is necessary for the CSS change), while removong the div from the h3. I've also changed all the class names, and removed the inline style. I also used a trick on the select dropdowns to show titles that can't be selected. Finally, I added the nospinner class to the number input, to get rid of this big up/down arrows in the CSS below. CSS: /* remove spinners from number inputs with class nospinner */ input [ type = number ] .nospinner::-webkit-outer-spin-button , input [ type = number ] .nospinner::-webkit-inner-spin-button { &nbsp; &nbsp; -webkit-appearance : none ; &nbsp; &nbsp; margin : 0 ; &nbsp; &nbsp; text-align : center ; } input [ type = number ] .nospinner { &nbsp; &nbsp; -moz-appearance :textfield; &nbsp; &nbsp; text-align : center ; } div.actions { &nbsp; &nbsp; border-radius : 15px 0px 0px 15px ; &nbsp; &nbsp; border-style : groove ; &nbsp; &nbsp; background : #FFFFFF ; &nbsp; &nbsp; width : 602px ; &nbsp; &nbsp; height : 314px ; &nbsp; &nbsp; margin : 1px 5px 4px 5px ; &nbsp; &nbsp; overflow-y : scroll ; } div.actions h3 { &nbsp; &nbsp; background-color : #EFEEEA ; &nbsp; &nbsp; text-align : center ; } div.action-repeating { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 23px 63px 120px 20px 50px ; &nbsp; &nbsp; grid-auto-rows : 20px ; &nbsp; &nbsp; column-gap : 4px ; &nbsp; &nbsp; width : 580px ; &nbsp; &nbsp; margin-top : 2px ; } .charsheet div.action-repeating input , .charsheet div.action-repeating select , .charsheet div.action-repeating button [ type = "roll" ] { &nbsp; &nbsp; height : 20px ; &nbsp; &nbsp; font-size : 14px ; &nbsp; &nbsp; padding : 0 ; } .charsheet div.action-repeating button [ type = "roll" ] { &nbsp; &nbsp; height : 18px ; &nbsp; &nbsp; margin : 0 ; } div.action-repeating input [ type = number ] .action-numdice { &nbsp; &nbsp; width : 100% ; &nbsp; &nbsp; text-align : center ; } select.action-type , input.action-desc , select.action-die { &nbsp; &nbsp; width : 100% ; } .repcontainer [ data-groupname = repeating_actions ] { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 50% 50% ; } Here I've used the ability of group classes together, and apply a bunch of changes at once so you don't need to repeat code. I've also added CSS Grid to make it easy to set up the columns - you can read about that here: <a href="https://cybersphere.me/css-grid/" rel="nofollow">https://cybersphere.me/css-grid/</a> I've also increased the Specificity of some declarations, so you don't need to use !Important. I'll have an article going up covering specificity in detail next Monday at the above site, and you can google it if you're impatient. The very last declaration, the repcontainer part, makes the repeating section flow into two columns.

GiGs said: You are making the code more complex than it needs to be, but here's your problem: &lt;input type="number" name="attr_action_numdice" min="1" max="10" class="input-action-numdice" value="1" title = "# Dice" /&gt;&lt;br /&gt; That &lt;br /&gt; at the end shouldn't be there. You are inserting an unneccessary line break. GiGs.... I've been in the software engineering field since 1986 (36 years).. I took a cursory look for line breaks (&lt;br&gt;) and didn't see one.. 101 first thing i looked for, lol didn't see that booger at all... As i'm sure you are aware you become blind after a while trying to think it through, too easy to think the problem lies in the Roll20 stuff rather than a simple &lt;br&gt;..&nbsp; Thanks for your eyes my friend..

GiGs said: Here's a quick pass at simplifying your code... Thanks there are several things I took from this, your no spinner class is a godsend i hadn't got round to googling a solution for this. I've used the selected, hidden readonly before, but decided to use it again after your prompt to do so. Thanks again !

Sorrow's Tale™ said: GiGs.... I've been in the software engineering field since 1986 (36 years).. I took a cursory look for line breaks (&lt;br&gt;) and didn't see one.. 101 first thing i looked for, lol didn't see that booger at all... As i'm sure you are aware you become blind after a while trying to think it through, too easy to think the problem lies in the Roll20 stuff rather than a simple &lt;br&gt;..&nbsp; Thanks for your eyes my friend.. It took me way too long to notice it too - i understand that kind of blindness all too well :)