Basic HTML question: what am I doing wrong ?

Hi there, I am trying to use <div> instead of <td>. As part of this exercise, I want to divide a row <div> into two cells. I have written the following html and CSS code. <div class="row">     <div class="cell">Box 1</div>     <div class="cell">Box 2</div> </div> .sheet-row:after {     content: "";     display: table;     clear: both; } .sheet-cell {   float: left;   width: 50%;   font-size: 20px;   border: 1px #BDBDBD solid; } When I run this code, I end up with Box 1 over Box 2 instead of next to each other. What am I doing wrong ?

I'm pretty sure it's the "float".&nbsp; I recommend against using "float" because it's weird. <a href="https://wiki.roll20.net/Designing_Character_Sheet_Layout" rel="nofollow">https://wiki.roll20.net/Designing_Character_Sheet_Layout</a> &nbsp;has some alternatives for layouts / aligning content. I've preferred Flexbox for the flexibility (pun not intended), but if you're used to thinking in tables then CSS Grid might be easier. With some searching I found a couple sites that might help with using Flex and Grid. I haven't messed with them much but I hope they can help: <a href="https://the-echoplex.net/flexyboxes/" rel="nofollow">https://the-echoplex.net/flexyboxes/</a> <a href="https://grid.layoutit.com/" rel="nofollow">https://grid.layoutit.com/</a> edit: Looking at it more, I'm not liking the "flexyboxes" designer much because the CSS it presents includes properties with the default value, such as "flex-direction: row" and "order: 0". If you want to use the default value, you don't have to specify it in the CSS.

You can also use <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> &nbsp;to quickly prototype some styles. Just keep in mind that it doesn't do the "sheet-" prefix in the CSS. For example, I set up what I think you were trying to do: <a href="https://jsfiddle.net/eLcz9x5r/" rel="nofollow">https://jsfiddle.net/eLcz9x5r/</a>

What you wrote works in jsfiddle (even adjusted with .sheet-) but not under roll20 when I tried. However, the default 2colrow / col default class works... but I would like to learn to do it by myself. Do we have any idea how is this done under CSS ? Tx for the CSS Grid. Is it supported by roll20 ?

Grid (and Flex) are standard CSS libraries, so they should work on all browsers supported by roll20 (i.e. not in Internet Explorer). Sorry my example didn't work moving to Roll20. It looks like "sheet-row" is a reserved class used by Roll20. (I expect that was also causing you trouble in your attemps with float.) You can change it to "sheet-columns" or some other name and it should work:&nbsp; <a href="https://jsfiddle.net/br12hf3o/" rel="nofollow">https://jsfiddle.net/br12hf3o/</a>

That is exactly the case. &lt;div class="newrow"&gt; &nbsp; &lt;div class="cell"&gt;Box 1&lt;/div&gt; &nbsp; &lt;div class="cell"&gt;Box 2&lt;/div&gt; &nbsp; &lt;div class="cell"&gt;Box 3&lt;/div&gt; &lt;/div&gt; and .sheet-newrow{ &nbsp; &nbsp; display: flex; } .sheet-cell { &nbsp; flex: 1; &nbsp; font-size: 25px;&nbsp; &nbsp; border: 1px #BDBDBD solid; } Work perfectly.