Page layout / alignment problem...

I have a layout error on my page that I am unable to identify... needs a fresh pair of eyes I think...anyone? Here is the HTML         <div>             <div class="field40 bold center">Known</div>             <div class="field10"></div>             <div class="field130 bold center">Skill</div>             <div class="field45 bold center">XP Spent</div>             <div class="field10"></div>             <div class="field40 bold center">Roll</div>         </div>         <div>             <input class="field40 center sheet-block-switch" type="checkbox" name="attr_skacrobatics" value="1">             <div class="sheet-block-a">                 <div class="field10"></div>                 <div class="field130 left">Acrobatics</div>                 <input class="field45 center" type="number" name="attr_skacrobaticsxp" value="0">                 <div class="field10"></div>                 <input class="field40 center" type="number" name="attr_skacrobaticsroll" value="" readonly>             </div>             <div class="sheet-block-b">                 <div class="field10"></div>                 <div class="field130 left">Acrobatics</div>                 <input class="field45 center" type="number" name="attr_skacrobaticsxp" value="0">                 <div class="field10"></div>                 <input class="field40 center" type="number" name="attr_skacrobaticsroll" value="" readonly>                 <button type="roll" name="roll_acrobatics" title='acrobatics' value="&{template:default}{{name=@{character_name} makes an Acrobatics skill roll}}{{needing [[round(@{pre}/5)+9]] or less}}{{and rolls [[3d6cs>7cf<0]]}}"></button>             </div>         </div>         <div>             <input class="field40 center" type="checkbox" name="attr_skacting" value="1">             <div class="field10"></div>             <div class="field130 left">Acting</div>             <input class="field45 center" type="number" name="attr_skactingxp" value="0">             <div class="field10"></div>             <input class="field40 center" type="number" name="attr_skactingroll" value="" readonly>         </div> Here is a screenshot of the output...for some bizarre reason that I am totally blind to, the acrobatics line is out of alignment...

Without the CSS it's only guessing, but I will point out the Acrobatic skill checkbox has three classes: field40 center sheet-block-switch. Acting only seems to have the first two classes.

Yeah, the block-switch was not originally there when the error already existed... I tried removing it just in case, made no difference.

I also see a button for Acrobatics that doesn't exist for Acting...? Can you share the relevant CSS for all the classes?

While you come up with more information, some advice about laying out CSS, you could probably to let your classes do more for you. Each row you've got eleven divs, some of which are spacers. I'm also struggling with understanding why you've broken the rows into two divs, block a and block b.  You could break it down to classes that signify intent and fill them out.  .sheet-known {     width: 40px;     text-align: center;     margin: 0px 10px; } .sheet-skillname {     min-width: 130px;     text-align: left; } .sheet-XP {     width: 45px;      text-align: center;     margin: 0px 5px; } The main benefit here is that if you decide that you need to give your skill-names more space, you can simply do it in the class rather than either having to make a new field135 class or the awkwardness of a field130 class with a width: 135px. 

Richard T. said: While you come up with more information, some advice about laying out CSS, you could probably to let your classes do more for you. Each row you've got eleven divs, some of which are spacers. I'm also struggling with understanding why you've broken the rows into two divs, block a and block b.  You could break it down to classes that signify intent and fill them out.  .sheet-known {     width: 40px;     text-align: center;     margin: 0px 10px; } .sheet-skillname {     min-width: 130px;     text-align: left; } .sheet-XP {     width: 45px;      text-align: center;     margin: 0px 5px; } The main benefit here is that if you decide that you need to give your skill-names more space, you can simply do it in the class rather than either having to make a new field135 class or the awkwardness of a field130 class with a width: 135px.  Hi Richard. The reason I have named my fields numerically is that the number corresponds with the width of the field in pixels. I find this enables me to plan the layout much more easily. So, field130 is 130 pixels wide, field 80 is 80 pixels wide, and so on... block-a and block-b are the two components of the block-switch.

Finderski said: I also see a button for Acrobatics that doesn't exist for Acting...? Can you share the relevant CSS for all the classes? Hi Finderski. The button for acrobatics is part of the block-switch. If the checkbox is checked, the button is displayed at the end of the row. If it is unchecked it is not displayed. So, if the skill is checked (the character knows the skill), the roll button is displayed on the sheet. If the skill is not known, there is no roll button.

Bump...still looking for help on this one...

Can you share the css? 

Richard T. said: Can you share the css?  Relevant css sections... .sheet-block-a, .sheet-block-switch:checked ~ .sheet-block-b {   display: block; } .sheet-block-b, .sheet-block-switch:checked ~ .sheet-block-a {   display: none; } .sheet-field10 {width: 10px; display: inline-block; margin-top: 2px; margin-bottom: 2px;} .sheet-field40 {width: 40px; display: inline-block; margin-top: 2px; margin-bottom: 2px;} .sheet-field45 {width: 45px; display: inline-block; margin-top: 2px; margin-bottom: 2px;} .sheet-field130 {width: 130px; display: inline-block; margin-top: 2px; margin-bottom: 2px;}

Oh, try changing your .sheet-block-a, .sheet-block-switch:checked ~ .sheet-block-b {   display: block; } to .sheet-block-a, .sheet-block-switch:checked ~ .sheet-block-b {   display: inline-block; }

Richard T. said: Oh, try changing your .sheet-block-a, .sheet-block-switch:checked ~ .sheet-block-b {   display: block; } to .sheet-block-a, .sheet-block-switch:checked ~ .sheet-block-b {   display: inline-block; } Fantastic! Problem solved....thanks very much  :)