Troubles with sheet-colrow within sheet-2colrow

Hi everybody, it's me again ^^ I'm still working on my "Donjon de Naheulbeuk" character sheet and I still have an issue I'm actually trying to create a sheet-colrow layout within the second column of a sheet-2colrow I don't know if this could work The first column of the sheet-2colrow works totally fine, but I can't figure out what I'm missing with the second column I really need your help, I'm almost done with the sheet, just need this improvement Here's where I'm My HTML : <a href="http://hpics.li/e950904" rel="nofollow">http://hpics.li/e950904</a> And here's is the result : I also tried : See the result below :

I am not sure of the end result you are looking for, but looking at it makes me think of using a table instead of a colrow. &lt;hr&gt; &lt;table&gt; &lt;tr&gt; &lt;td style="width:125px; text-align:left"&gt;Caracteristiques&lt;/td&gt; &lt;td style="width:75px; text-align:left"&gt;Calcul&lt;/td&gt; &lt;td style="width:50px; text-align:left"&gt;Valeur&lt;/td&gt; &lt;td style="width:50px; text-align:left"&gt;Epreuve&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Courage&lt;/td&gt; &lt;td&gt;(1d6+7)&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_Courage" value="0" &lt;/td&gt; &lt;td&gt;&lt;button type="roll" value="/roll d20&lt;@{Courage} (Epreuve de Courage)"&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; But I've been know to over use &lt;table&gt;. Or, maybe, display:inline might help. Or, perhaps, the compute thinks there isn't enough space for the cols.

The table synthax you gave me works fine, everything is perfectly aligned But all the table is displayed below the first column I would like to display it on the right side, in the second column of the "sheet-2colrow" I added a &lt;div class="sheet-col"&gt; before the &lt;table&gt; but it doesn't works

sheet-colrow is not a CSS class provided by Roll20. The available classes designed to assist in creating multicolumn layouts are sheet-col, sheet-2colrow, and sheet-3colrow.

So what I am guessing you need to do is this: &lt;div class="sheet-2colrow"&gt; &lt;div class="sheet-col"&gt; left stuff goes here &lt;/div&gt; &lt;div class="sheet-col"&gt; &lt;hr&gt; &lt;table&gt; &lt;tr&gt; &lt;td style="width:125px; text-align:left"&gt;Caracteristiques&lt;/td&gt; &lt;td style="width:75px; text-align:left"&gt;Calcul&lt;/td&gt; &lt;td style="width:50px; text-align:left"&gt;Valeur&lt;/td&gt; &lt;td style="width:50px; text-align:left"&gt;Epreuve&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Courage&lt;/td&gt; &lt;td&gt;(1d6+7)&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_Courage" value="0" &lt;/td&gt; &lt;td&gt;&lt;button type="roll" value="/roll d20&lt;@{Courage} (Epreuve de Courage)"&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; ...and put whatever is suppose to go in the left column where the above code says: "left stuff goes here"

This is exactly what I did, but the second column appears below the first one, and not on its right

I thinks its a width thing, then. I don't have the so I can't tell. One idea is to put a limit on the width of the sheet-col (the sheet defualts to something close to 840 px in width). However, if the contents are wider than the sheet-col its in, it will spread out the sheet-col to fit.

My second column is 400px width So I have to create a new CSS class to match my needs ? I hope not, I'm lame in CSS x) .charsheet .sheet-col { width: 500px; } Or something like that ? Or eventually with a new name like .charsheet .sheet-colcustom { width: 500px; } And in my HTML &lt;div class="sheet-colcustom"&gt;

Edit I found out what was screwing everything ! A stupid &lt;hr&gt; between my two column ! I deleted it and everything works fine now !

Awesome!

Thanks for your help guys Sheet amost finished :D Just some minor improvement and it will be released

Another question along these same lines: Is there a way to create a 4th column on the sheet? I've already realized that "sheet-4colrow" won't do anything, but I'd like to have one more column. Is the addition of BlackyB's suggestion: .charsheet.sheet-colcustom { width: 500px; } or does that just adjust the already existing columns to 500px? BTW, BlackyB, awesome sheet.

Jador said: Another question along these same lines: Is there a way to create a 4th column on the sheet? I've already realized that "sheet-4colrow" won't do anything, but I'd like to have one more column. You can create your own sheet-4colrow fairly simply: .sheet-4colrow { display: block; clear: both; } .sheet-4colrow .sheet-col { width: calc(25% - 21px); margin-right: 15px; } You'll probably want to play with the numbers (the 21px and 15px, specifically), but that's all there really is to it.

You could also create a table Here's an exemple I used in my sheet within a 2colrow div Bold is the header, below you'll have each line &lt;div class=sheetcol&gt; &lt;table width="100%"&gt; (Table's header) &lt;tr&gt; &lt;td style="width:150px; text-align:center"&gt;Caracteristiques&lt;/td&gt; &lt;td style="width:150px; text-align:center"&gt;Calcul&lt;/td&gt; &lt;td style="width:50px; text-align:center"&gt;Valeur&lt;/td&gt; &lt;td style="width:50px; text-align:center"&gt;+ / -&lt;/td&gt; &lt;td style="width:50px; text-align:center"&gt;Epreuve&lt;/td&gt; &lt;/tr&gt; (Here comes the first line) &lt;tr&gt; &lt;td&gt;Courage&lt;/td&gt; &lt;td&gt;1D6+7&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_Courage" value="0"&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_CourageMod" value="0"&gt; &lt;/td&gt; &lt;td&gt;&lt;button type="roll" value="/roll d20&lt;[[@{Courage}+@{CourageMod}]] (Epreuve de Courage)"/&gt;&lt;/td&gt; &lt;/tr&gt; (Add another line...) &lt;/table&gt; &lt;/div&gt; Watch out for the px width, if your table goes out of the sheet, last column will be under the table and it will be a total mess Sorry for my english, hope you'll understand me ^^ Edit : Dammit, Brian is too fast ! x)

It's still not doing what I want it to do. Here's what my CSS looks like: .sheet-4colrow { display: block; clear: both; } .sheet-4colrow .sheet-col { width: calc(24% - 200px); margin-right: 200px; } body { background-color: #ffffff; } table.sheet-statistics { background-color: #000000; border-style: thin red groove; } And my HTML: &lt;div class='sheet-4colrow'&gt; &lt;div class='sheet-col'&gt; &lt;!-- Put the content for the first column here --&gt; &lt;div&gt;Character Name &lt;/div&gt;&lt;input type="text" name="ChrName"&gt; &lt;div&gt;Level&lt;/div&gt; &lt;input type="number" name="attr_Level"&gt; &lt;table&gt; &lt;div&gt;Strength&lt;/div&gt; &lt;input type="number" name="attr_Str"&gt; &lt;div&gt;Agility&lt;/div&gt; &lt;input type="number" name="attr_Agi"&gt; &lt;div&gt;Wisdom&lt;/div&gt; &lt;input type="number" name="attr_Wis"&gt; &lt;div&gt;Intelligence&lt;/div&gt; &lt;input type="number" name="attr_Int"&gt; &lt;div&gt;Finesse&lt;/div&gt; &lt;input type="number" name="attr_Fin"&gt; &lt;div&gt;Charisma&lt;/div&gt; &lt;input type="number" name="attr_Cha"&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- Second column --&gt; &lt;div&gt;Race&lt;/div&gt; &lt;input type="text"&gt; &lt;div&gt;Racial Variant&lt;/div&gt; &lt;input type="text"&gt; &lt;div&gt;Resilience&lt;/div&gt; &lt;input type="number" name="attr_Res"&gt; &lt;div&gt;Alertness&lt;/div&gt; &lt;input type="number" name="attr_Alt"&gt; &lt;div&gt;Willpower&lt;/div&gt; &lt;input type="number" name="attr_Wil"&gt; &lt;div&gt;Savvy&lt;/div&gt; &lt;input type="number" name="attr_Sav"&gt; &lt;div&gt;Dignity&lt;/div&gt; &lt;input type="number" name="attr_Dig"&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- Third column --&gt; &lt;div&gt;Class&lt;/div&gt; &lt;input type="text"&gt; &lt;div&gt;Experience&lt;/div&gt; &lt;input type="text" name="Experience"&gt; &lt;div&gt;Attack Base&lt;/div&gt; &lt;input type="number" name="attr_AtkBase"&gt; &lt;div&gt;Melee Attack&lt;/div&gt; &lt;input type="number" name="attr_MelAtk"&gt; &lt;div&gt;Ranged Attack&lt;/div&gt; &lt;input type="number" name="attr_RanAtk"&gt; &lt;div&gt;Defense Base&lt;/div&gt; &lt;input type="number" name="attr_Def"&gt; &lt;div&gt;Encumbrance&lt;/div&gt; &lt;input type="number" name="attr_Enc"&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- Fourth Column --&gt; &lt;div&gt;Weapon 1&lt;/div&gt; &lt;input type="text"&gt; &lt;div&gt;Type&lt;/div&gt; &lt;input type="text"&gt; &lt;div&gt;Damage&lt;/div&gt; &lt;input type="number"&gt; &lt;div&gt;Hand&lt;/div&gt; &lt;input type="Number"&gt; &lt;/div&gt; &lt;/div&gt; And the output: What I'm looking for is four even columns, without the compacting of the labels (I.E. "Character Name" on one row. Not sure what I'm doing wrong.

Hi Jador, try something like .sheet-4colrow { display: block; clear: both; } .sheet-4colrow .sheet-col { margin:10px; } body { background-color: #ffffff; } table.sheet-statistics { background-color: #000000; border-style: thin red groove; } input[type="text"], select { width: 100%; margin: 0; } input[type="number"], select { width: 25%; margin: 0; }

That's why I think a table is a lot easier. Easy way to change each parameters as you like. Columns width, text box size, alignement, etc BTW, I suggest that you move the text input beside the label, not below. Easier to read

BlackyB, youre absolutely right. As soon as I abandoned the &lt;div&gt;&lt;/div&gt; assignments, everything started to fall into place. Also, I did indeed place the text input next to the labels, so it's much easier to read. Again, thanks to all of you!