Basic custom character sheet - CSS formatting

Hello, I have a very limited experience with HTML and CSS, but I'm trying to create a basic custom character sheet for a homebrew (a stone age campaign based on the Call of Cthulhu rules). I'm using the following example as my base: <a href="https://github.com/Roll20/roll20-character-sheets/tree/master/kitchensink" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/tree/master/kitchensink</a> My work in progress is on GitHub as well: <a href="https://github.com/cvillarl/stone-age" rel="nofollow">https://github.com/cvillarl/stone-age</a> The challenge I'm having is trying to vertically align different elements within a column that I would have expected to remain on the same row. For example, the "Max SP" label and the input named "attr_MaxSP". If you check the screenshot, you will see how the input jumps onto a second row. HTML &lt;div class="col"&gt; &nbsp;&nbsp;&nbsp; &lt;h3&gt;Spirit Points&lt;/h3&gt; &nbsp;&nbsp;&nbsp; &lt;br /&gt; &nbsp;&nbsp;&nbsp; &lt;label&gt;Max SP&lt;/label&gt;&lt;input type="number" name="attr_MaxSP" /&gt; &nbsp;&nbsp;&nbsp; &lt;br /&gt; &nbsp;&nbsp;&nbsp; &lt;label&gt;Current SP&lt;/label&gt;&lt;input type="number" name="attr_CurrentSP" /&gt; &lt;/div&gt; CSS label { &nbsp;&nbsp;&nbsp; display: inline-block; /*&nbsp;&nbsp;&nbsp; width: 31%;*/ } input { &nbsp;&nbsp;&nbsp; display: inline-block; /*&nbsp;&nbsp;&nbsp; width: 165px;*/ } Any suggestions are welcomed. Thank you. Regards, Carlos

It might be the size you are setting for these elements is too big for the container they are put in. One technique people sometimes use to get around this, is to nest the input inside the label &nbsp; &nbsp;&lt;label&gt;Max SP&lt;input type="number" name="attr_MaxSP" /&gt;&lt;/label&gt; Personally I'm not a fan of this because you cant line the inputs up. Another way is CSS grid. Remove the &lt;br/&gt; elements, and add a separate style to use for the section &lt;div class="col spirit"&gt; &nbsp;&nbsp;&nbsp; &lt;h3&gt;Spirit Points&lt;/h3&gt; &nbsp; &nbsp; &lt;label&gt;Max SP&lt;/label&gt;&lt;input type="number" name="attr_MaxSP" /&gt; &nbsp; &nbsp; &lt;label&gt;Current SP&lt;/label&gt;&lt;input type="number" name="attr_CurrentSP" /&gt; &lt;/div&gt; Then use CSS to arrange them in 2 columns div.sheet-spirit {&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;display: grid; &nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns: 2fr 1fr; } This will create a 2 column layout where the first column is twice the width of the second. You can use explicit sizes or percentages to set whatever size you want: &nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns: 67% 33%; &nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns: 31% 165px; A CSS Grid targets every HTML element that is directly beneath it - just the first layer of depth. The problem here is the h3 element, which should take up both columns. You can fix that by adding div.sheet-spirit h3 { &nbsp;&nbsp;&nbsp;&nbsp;grid-column:&nbsp;1&nbsp;/&nbsp;-1; } That should solve the layout issue. But if it doesnt, you need to find out what is affecting the width of that column, and expand it.

Carlos said: I have a very limited experience with HTML and CSS, but I'm trying to create a basic custom character sheet for a homebrew Yes, the built-in columns and rows are great for a basic sheet. The challenge I'm having is trying to vertically align different elements within a column that I would have expected to remain on the same row. For example, the "Max SP" label and the input named "attr_MaxSP". If you check the screenshot, you will see how the input jumps onto a second Unfortunately, trying to do aligning or almost any kind of styling with the built-in column/rows will be tricky, as it's not entirelyunderstood how they are built, leading to fumbling in the dark on how they function. They are old(built using some ancient html/css trickery from the times before the more modern frameworks), and generally discouraged from being used for anything but the most basic layouts exactly for the reason you discovered. And as GiGs said, it's best to use either CSS Grid or CSS Flexbox to do any further kind of styling. He gave you a good example, and you can find more info at: <a href="https://wiki.roll20.net/Building_Character_Sheets#Sheet_Layout" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Sheet_Layout</a>

Thanks for your comments. I had read about CSS grid but I thought that the built-in columns would be sufficient. Never mind, I've made good progress today with a CSS grid version and I've managed to get an almost acceptable basic sheet. The main problem is the lack of vertical alignment of the elements within the "Skills" section. There must be a way of doing this without creating a 18 x 9 cell grid just for this section. I've done it like that on the other sections and it's been time consuming enough, but a grid of 162 cells is just too much. Am I missing something? Thank you. HTML and CSS: <a href="https://github.com/cvillarl/stone-age" rel="nofollow">https://github.com/cvillarl/stone-age</a>

That's a really nice looking layout. The problem with your skills section is you've put every column in its own div. What you should do with grid, is remove those divs, so the grid is arranging all the checkboxes, labels, inputs, and so on. Also your skill names are inside p tags. Swap them for spans. Then just remove the grid-template-areas from your sheet-three class, like so, to arrange the whole skill section: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid-area: three; display: grid; grid-gap: 4px; grid-template-columns: 1fr 9fr 2fr 1fr 9fr 2fr 1fr 9fr 2fr; It's exactly what you had before, just the grid-template-areas line is removed. This will automatically sort everything into columns. You only need to use grid-template-areas when you have irregular shapes. Like your basic sheet design, where you are organising blocks of different sizes, is a pretty good time to use it. But for the individual subsections, where everything is laid out in a regular pattern of equal sized rows and equal sized columns - there you dont need it and shouldnt use it. To make sure the header doesnt mess up the arrangement, change the html from this &lt;div class="skillsHeader"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Skills&lt;/h2&gt; &lt;/div&gt; to this &lt;h2&gt;Skills&lt;/h2&gt; and add this to the css div.sheet-three h2 { &nbsp;&nbsp;&nbsp;&nbsp;grid-column:&nbsp;1&nbsp;/&nbsp;-1; } This forces the header to span the entire row of the grid. Your doing something a lot of new sheet designers do, and that is include too many divs. Divs have their place, but there is almost never a good reason to put a single item in a div. Any styling you were going to put on the div, you can put on the object inside it.

Addendum: I just noticed two complications with the above approach. First you have a lot of &lt;br&gt; tags, which will break up the flow so they all need removing. And the way you have laid out the html, everything in one column, then everything in the next column, means you need to add an extra step - force the attributes to flow downwards, a certain number of rows, and then go to the next row. But that is pretty easy to do in Grid CSS. So for full clarity, here's the complete skills section, in HTML and CSS:&nbsp; <a href="https://gist.github.com/G-G-G/8df5077bdff6fcabaa10c8ae1ca33c75" rel="nofollow">https://gist.github.com/G-G-G/8df5077bdff6fcabaa10c8ae1ca33c75</a> Changes to html removed all the divs under div three. all the &lt;p&gt; were changed to &lt;span&gt; removed all &lt;br&gt; Changes to CSS: changed it to this: div.sheet-three { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid-area: three; display: grid; grid-gap: 4px; grid-template-columns: 1fr 9fr 2fr 1fr 9fr 2fr 1fr 9fr 2fr; grid-template-rows: 2em repeat(17, 1em); grid-auto-flow: column; border-style: solid; border-width: thin; padding: 5px; } div.sheet-three h2 { grid-column: 1 / -1; } This is it - all the CSS needed to make the rows work.&nbsp; Grid-template-columns automatically&nbsp; sorts all html items beneath the container into the specified number of columns. You have 9 columns here, so if there were 30 items, it would sort them into three rows of 9, followed by a single row of 3.&nbsp; grid-auto-flow: &nbsp;if not specified, CSS Grid will have all the items flowing from left to right, and then down into the next row. If we set it as column , it will flow down the row, one column at a time. For this to work properly, we have to tell it how many rows to use. And so we have grid-template-rows: 2em repeat(17, 1em); This sets the height of each row. We have one double height row, following by 17 normal height rows. The double height row is for the header. And for the header, we add the final CSS, grid-column , to force it span over one entire row. The technique described here can be used on the rest of your sheet to make the css a lot simpler.

PS: you could change the columns row to this grid-template-columns:&nbsp;repeat(3,&nbsp;1fr&nbsp;9fr&nbsp;2fr); repeat does excatly what the name suggests, repeats the specified group 3 times.

Thank you very much for your help. If it wasn't because of it, I wouldn't have a character sheet. It's very basic - I can already see many problems - but it's usable. We can start using it and possibly reviewing in it in the future to add rolls and refine the design. <a href="https://github.com/cvillarl/stone-age" rel="nofollow">https://github.com/cvillarl/stone-age</a>

It's coming along very nicely. Honestly I think it would be a great example to point other beginners to - all the code in it right now is about layout, without extra stuff to distract people who are still learning.&nbsp;

I was aiming for a basic sheet, and I would have been happy with that, but once I got my head around it, it's not that difficult and I've created a relatively fancy one. I've learnt today that one of the limitations of Roll20 is that you can only have one character sheet per game, which is usually enough for the players, but the GM may want to use a different for NPCs or monsters - at least that was my idea. Therefore, I've added three tabs to my character sheet, a "Character" one to be used by the players, a "NPCs" one for the GM and a common "Notes" one. Furthermore, the NPCs tab is a repeating one, so you can add multiple NPCs within the same sheet. I've even added roll buttons, although I haven't got round to create my own roll template, so they all just roll 1D100 right now.

Thats excellent. You might want to make Notes a repeating section too, use textareas so gms can make a bunch of separate notes, then delete them, so they can have permanent and temporary notes.

Anotehr recommendation: its a good idea to put a default value on thsoe inputs that represent skills and stats, or that players might use in macros. For example &lt; input type =" text " name =" attr_STR " class =' sheet-width100 ' value="0"/&gt; or &lt; input type =" text " name =" attr_STR " class =' sheet-width100 ' value="10"/&gt; If there is no value at all there, macros will report an error, but if there's a default value, even 0, they wont. I see you've done it for the skills, but its good to do it for stats too, and hit points, and anything that players might want to put in a macro to reference them. For text inputs you could use value=""