[Splittermond] Redesign - Where to begin?

Hi, as stated in the title I was asked by the publisher of the game if I could redesign the Roll20 character sheet so that looks more like the official character sheet. Since I learned HTML &amp; CSS in the late 90s I learned to use &lt;table&gt;s for grid/design purposes. With this redesign I want to clear things up and abandon the actual table style in favor of a more elegant way to design the sheet. Regarding to the official documentation for creating character sheets there are several ways to create a proper design. I've tried to learn something about FlexBox and Grid, but it only confused me even more (I'm a beginner in CSS and tend to make everything happen via inline styles). So I thought I'd go with something simple like the basic col-layout (&lt;div class='3colrow'&gt;&lt;div class='col'&gt;....). But apparently I'm missing something important. I've started with the header of the character sheet: And I tried to separate it in different columns: Two colums for the main part (red line), then in the left column 2x 2 colums for name and education and then 5x 4 colums for the rest. And in the right column 1x 1 column for the image and 2x 2 columns for the moonsign and the moonpoints. My approach in HTML looks like this: &lt;div class="main"&gt; &lt;div class='2colrow'&gt; &lt;div class='col'&gt; &lt;div class='2colrow'&gt; &lt;div class='col default-header'&gt;Name:&lt;/div&gt; &lt;div class='col default-background'&gt; &lt;input type="text" name="attr_character_name" placeholder="Charaktername" class="default-background" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='2colrow'&gt; &lt;div class='col default-header'&gt;Ausbildung:&lt;/div&gt; &lt;div class='col'&gt; &lt;input type="text" name="attr_education" placeholder="Ausbildung" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='4colrow'&gt; &lt;div class='col default-header'&gt;Kultur:&lt;/div&gt; &lt;div class='col default-background'&gt; &lt;input type="text" name="attr_character_culture" placeholder="Kultur" class="default-background" /&gt; &lt;/div&gt; &lt;div class='col default-header'&gt;Abstammung:&lt;/div&gt; &lt;div class='col default-background'&gt; &lt;input type="text" name="attr_character_heritage" placeholder="Abstammung" class="default-background" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='4colrow'&gt; &lt;div class='col default-header'&gt;Rasse:&lt;/div&gt; &lt;div class='col'&gt; &lt;input type="text" name="attr_character_race" placeholder="Rasse" /&gt; &lt;/div&gt; &lt;div class='col default-header'&gt;Geschlecht:&lt;/div&gt; &lt;div class='col'&gt; &lt;input type="text" name="attr_character_gender" placeholder="Geschlecht" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='4colrow'&gt; &lt;div class='col default-header'&gt;Haarfarbe:&lt;/div&gt; &lt;div class='col default-background'&gt; &lt;input type="text" name="attr_character_haircolor" placeholder="Haarfarbe" class="default-background" /&gt; &lt;/div&gt; &lt;div class='col default-header'&gt;K&amp;ouml;rpergr&amp;ouml;&amp;szlig;e:&lt;/div&gt; &lt;div class='col'&gt; &lt;input type="text" name="attr_character_height" placeholder="Körpergröße" class="default-background" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='4colrow'&gt; &lt;div class='col default-header'&gt;Augenfarbe:&lt;/div&gt; &lt;div class='col'&gt; &lt;input type="text" name="attr_character_eyecolor" placeholder="Augenfarbe" /&gt; &lt;/div&gt; &lt;div class='col default-header'&gt;Gewicht:&lt;/div&gt; &lt;div class='col'&gt; &lt;input type="text" name="attr_character_weigth" placeholder="Gewicht" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='4colrow'&gt; &lt;div class='col default-header'&gt;Hautfarbe:&lt;/div&gt; &lt;div class='col default-background'&gt; &lt;input type="text" name="attr_character_skincolor" placeholder="Hautfarbe" class="default-background" /&gt; &lt;/div&gt; &lt;div class='col default-header'&gt;Geburtsort:&lt;/div&gt; &lt;div class='col'&gt; &lt;input type="text" name="attr_character_birthofplace" placeholder="Geburtsort" class="default-background" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='col'&gt; &lt;div class='col'&gt; &lt;div class="background-image"&gt;&amp;nbsp; &lt;img align=center width=600 src="<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Splittermond/Splittermond.png&quot;&gt;&lt;/img" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Splittermond/Splittermond.png"&gt;&lt;/img</a>&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='2colrow'&gt; &lt;div class='col default-header'&gt;Mondzeichen:&lt;/div&gt; &lt;div class='col'&gt; &lt;input type="text" name="attr_character_moonsign" placeholder="Mondzeichen" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='2colrow'&gt; &lt;div class='col default-header'&gt;Splitterpunkte:&lt;/div&gt; &lt;div class='col'&gt; &lt;input type="text" name="attr_character_moonpoints" placeholder="Splitterpunkte" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; But the character sheet looks really awful: And if I resize the sheet it's looking even more uglier: What do I want do accomplish / What do I actually need help for? I'd be glad to get some tips to achieve the following: Reducing the space between e.g. "Name" and "Test" to 0, like it is in the original design The according &lt;div&gt;s and the &lt;input&gt;s should have the same height They also should be next to each other and not above or beneath The image should fill the whole width The background color of the div shouldn't be stretched out of the input field when I resize the sheet Everything should have a fixed length and should not get bigger I hope someone can give me a little bit of advise to make the sheet better! Cheers, Loki

Hi, could maybe someone give a small hint to which CSS properties I'll need to accomplish the changes? Cheers, Loki

The inbuilt classes for character sheets are exceedingly outdated, and I wouldn't recommend using them. Instead I would learn how to use CSS Grid , as this makes character sheet design a snap, by comparison.

As someone with very limited coding experience this css grid example sheet helped me a lot:&nbsp; <a href="https://github.com/Anduh/Roll20-grid-template" rel="nofollow">https://github.com/Anduh/Roll20-grid-template</a>

This thread might also help:&nbsp; <a href="https://app.roll20.net/forum/permalink/8622902/" rel="nofollow">https://app.roll20.net/forum/permalink/8622902/</a>

Marius said: As someone with very limited coding experience this css grid example sheet helped me a lot:&nbsp; <a href="https://github.com/Anduh/Roll20-grid-template" rel="nofollow">https://github.com/Anduh/Roll20-grid-template</a> Good to know it's been useful. I've seen two or three sheet having been made using that template, I really should update it at some point with simple styling on the things that goes inside the grids.

Thank you for your answers! I started to learn CSS Grid yesterday and really got into it. Incredibly helpul was <a href="https://cssgridgarden.com/" rel="nofollow">https://cssgridgarden.com/</a>, because "learning by playing" is by far the most effective way to learn things for me. Would it be okay to use this thread for upcoming questions regarding CSS Grid or should I open a new one for that? Cheers!

I'd recommend starting a new thread, with CSS grid in the title - that way people who have no interest in splittermond but do know css will see the thread and be able to help. Put a link to it in this thread too, so we can follow it.