How do I create multiple sections of columns in a custom CharSheet?

I am trying to make a section of 2 columns and a section of 3 columns in my character sheet, but the most I can get is 3. I have a section that says <div class="sheet-2colrow> i filled that out correctly and it worked. i ended each column with </div>. then i tried to make <div class="sheet-3colrow"> yet even though i am entering everything the same way i did for the 2colrow section everything is just stacking in a single column. is there something i am missing? I have even tried entering a non columned section between the 2 section of columns and that didn't help.

The following is the copy of my html code for the character sheet I am working on. I have no idea how to write html, or css code. I am hoping the CSS stuff is optional as long as this stuff can get condensed into the columns I want. when I click preview with this current code the Attributes and bonuses are in 1 column (i would like them in 2 columns side by side) and the skills are in 1 column except balance skills are where they should be, next to the Brains skills in a separate column. If anyone can help, what I would like is for all the general info stuff at the top to be left alone for now. under the "Quirks" text feild I'd like the Attributes and HP in 1 column and the Bonuses in a column next to it. then Underneath those 2 columns i would like 3 columns containing Brains Skills in the first, Balance skills in the middle and Brawn and Bravado skills in the third column. <div class="sheet-wrapper"> <div> <div><input type="text" name="attr_character_name" /><label>Character Name</label></div> <div><input type="text" name="attr_class" /><label>Archetype</label></div> <div><input type="text" name="attr_xp" /><label>Experience Points</label></div> <textarea name="attr_quote" ></textarea><label>Quote</label> <textarea name="attr_perks" ></textarea><label>Perks</label> <textarea name="attr_quirks" ></textarea><label>Quirks</label> </div> <div class="sheet-2colrow"> <!-- Attributes, Hit Points --> <div class="sheet-col"> <!-- Attributes --> <label>ATTRIBUTES</label> <div><input type="number" name="attr_brawn" /><label>Brawn</label></div> <div><input type="number" name="attr_brains" /><label>Brains</label></div> <div><input type="number" name="attr_balance" /><label>Balance</label></div> <div><input type="number" name="attr_bravado" /><label>Bravado</label></div> <!-- Hit Points --> <label>HIT POINTS</label> <div><input type="number" name="attr_maxhp" /><label>Max HP</label></div> <div><input type="number" name="attr_currenthp" /><label>Current HP</label></div> </div> <!-- BONUSES, Initiative, Movement and Zero Dice --> <div class="sheet-col"> <!-- BONUSES --> <label>BONUSES</label> <div><input type="number" name="attr_init" /><label>Initiative Bonus</label></div> <div><input type="number" name="attr_strength" /><label>Strength Bonus</label></div> <div><input type="number" name="attr_Dodge" /><label>Dodge Bonus</label></div> <div><input type="number" name="attr_speed" /><label>Movement Speed</label></div> <div><input type="number" name="attr_zdice" /><label>Zero Dice</label></div> </div> <div class="sheet-3colrow"> <!-- BRAINS SKILLS --> <div class="sheet-col"> <!-- BRAINS SKILLS --> <label>BRAINS SKILLS</label> <div><input type="number" name="attr_disguise" /><label>Disguise</label></div> <div><input type="number" name="attr_firstaid" /><label>First Aid</label></div> <div><input type="number" name="attr_hide" /><label>Hide*</label></div> <div><input type="text" name="attr_lang1" /></div> <div><input type="number" name="attr_lang1" /><label>Language/Lore</label></div> <div><input type="text" name="attr_lang2" /></div> <div><input type="number" name="attr_lang2" /><label>Language/Lore</label></div> <div><input type="text" name="attr_lang3" /></div> <div><input type="number" name="attr_lang3" /><label>Language/Lore</label></div> <div><input type="text" name="attr_lang4" /></div> <div><input type="number" name="attr_lang4" /><label>Language/Lore</label></div> <div><input type="number" name="attr_listen" /><label>Listen*</label></div> <div><input type="number" name="attr_medicine" /><label>Medicine</label></div> <div><input type="number" name="attr_navspace" /><label>Navigate: Space</label></div> <div><input type="number" name="attr_navsurface" /><label>Navigate: Surface</label></div> <div><input type="number" name="attr_psych" /><label>Psychology</label></div> <div><input type="number" name="attr_biology" /><label>Science: Biology</label></div> <div><input type="number" name="attr_chemistry" /><label>Science: Chemistry</label></div> <div><input type="number" name="attr_geology" /><label>Science: Geology</label></div> <div><input type="number" name="attr_physics" /><label>Science: Physics</label></div> <div><input type="number" name="attr_social" /><label>Science: Social</label></div> <div><input type="number" name="attr_see" /><label>See*</label></div> <div><input type="number" name="attr_build" /><label>Technical: Build and Repair</label></div> <div><input type="number" name="attr_knowhow" /><label>Technical: Know How</label></div> <div><input type="number" name="attr_tracking" /><label>Tracking</label></div> <div><input type="number" name="attr_survival" /><label>Wilderness Survival</label></div> </div> <!-- BALANCE SKILLS --> <div class="sheet-col"> <!-- BALANCE SKILLS --> <label>BALANCE SKILLS</label> <div><input type="number" name="attr_climb" /><label>Climb*</label></div> <div><input type="number" name="attr_fisticuffs" /><label>Fisticuffs*</label></div> <div><input type="number" name="attr_lockpick" /><label>Lockpicking</label></div> <div><input type="number" name="attr_air" /><label>Pilot: Air</label></div> <div><input type="number" name="attr_land" /><label>Pilot: Land</label></div> <div><input type="number" name="attr_sea" /><label>Pilot: Sea</label></div> <div><input type="number" name="attr_space" /><label>Pilot: Space</label></div> <div><input type="number" name="attr_ride" /><label>Ride Animal</label></div> <div><input type="number" name="attr_sleight" /><label>Sleight of Hand</label></div> <div><input type="number" name="attr_sneak" /><label>Sneak*</label></div> <div><input type="number" name="attr_throw" /><label>Throw*</label></div> <div><input type="number" name="attr_bow" /><label>Weapon: Bow</label></div> <div><input type="number" name="attr_heavy" /><label>Weapon: Heavy Weapons</label></div> <div><input type="number" name="attr_melee" /><label>Weapon: Melee</label></div> <div><input type="number" name="attr_raygun" /><label>Weapon: Ray Gun</label></div> <div><input type="number" name="attr_tacticle" /><label>Weapon: Tacticle</label></div> <div><input type="number" name="attr_zerog" /><label>Zero-G Training</label></div> </div> <!-- BRAWN SKILLS, BRAVADO SKILLS --> <div class="sheet-col"> <!--BRAWN SKILLS --> <label>BRAWN SKILLS</label> <div><input type="number" name="attr_endure" /><label>Endure*</label></div> <div><input type="number" name="attr_heave" /><label>Heave*</label></div> <div><input type="number" name="attr_jump" /><label>Jump*</label></div> <div><input type="number" name="attr_swim" /><label>Swimming</label></div> <!-- BRAVADO SKILLS --> <label>BRAVADO SKILLS</label> <div><input type="number" name="attr_admin" /><label>Administration</label></div> <div><input type="number" name="attr_animal" /><label>Animal Handling</label></div> <div><input type="number" name="attr_backbone" /><label>Backbone*</label></div> <div><input type="number" name="attr_explosives" /><label>Explosives</label></div> <div><input type="text" name="attr_perform" /></div> <div><input type="number" name="attr_perform" /><label>Perform</label></div> <div><input type="number" name="attr_bargain" /><label>Pursuade: Bargain</label></div> <div><input type="number" name="attr_bluff" /><label>Pursuade: Bluff</label></div> <div><input type="number" name="attr_charm" /><label>Pursuade: Charm</label></div> <div><input type="number" name="attr_debate" /><label>Pursuade: Debate</label></div> <div><input type="number" name="attr_intimidate" /><label>Pursuade: Intimidate</label></div> <div><input type="number" name="attr_lead" /><label>Pursuade: Leadership</label></div> <div><input type="number" name="attr_streetwise" /><label>Streetwise</label></div> </div> <textarea name="attr_equipment" ></textarea><label>Equipment</label></label> </div>

I see two problems: You have two closing label tags at your Equipment at the end. You don't close either your sheet-2colrow or your sheet-3colrow divs. Here's your HTML again, newlines and indents added to make things more clear: <div class="sheet-wrapper"> <div> <div> <input type="text" name="attr_character_name" /> <label>Character Name</label> </div> <div> <input type="text" name="attr_class" /> <label>Archetype</label> </div> <div> <input type="text" name="attr_xp" /> <label>Experience Points</label> </div> <textarea name="attr_quote"></textarea> <label>Quote</label> <textarea name="attr_perks"></textarea> <label>Perks</label> <textarea name="attr_quirks"></textarea> <label>Quirks</label> </div> <div class="sheet-2colrow"> <!-- Attributes, Hit Points --> <div class="sheet-col"> <!-- Attributes --> <label>ATTRIBUTES</label> <div> <input type="number" name="attr_brawn" /> <label>Brawn</label> </div> <div> <input type="number" name="attr_brains" /> <label>Brains</label> </div> <div> <input type="number" name="attr_balance" /> <label>Balance</label> </div> <div> <input type="number" name="attr_bravado" /> <label>Bravado</label> </div> <!-- Hit Points --> <label>HIT POINTS</label> <div> <input type="number" name="attr_maxhp" /> <label>Max HP</label> </div> <div> <input type="number" name="attr_currenthp" /> <label>Current HP</label> </div> </div> <!-- BONUSES, Initiative, Movement and Zero Dice --> <div class="sheet-col"> <!-- BONUSES --> <label>BONUSES</label> <div> <input type="number" name="attr_init" /> <label>Initiative Bonus</label> </div> <div> <input type="number" name="attr_strength" /> <label>Strength Bonus</label> </div> <div> <input type="number" name="attr_Dodge" /> <label>Dodge Bonus</label> </div> <div> <input type="number" name="attr_speed" /> <label>Movement Speed</label> </div> <div> <input type="number" name="attr_zdice" /> <label>Zero Dice</label> </div> </div> </div><!-- ADDED CLOSING DIV TAG --> <div class="sheet-3colrow"> <!-- BRAINS SKILLS --> <div class="sheet-col"> <!-- BRAINS SKILLS --> <label>BRAINS SKILLS</label> <div> <input type="number" name="attr_disguise" /> <label>Disguise</label> </div> <div> <input type="number" name="attr_firstaid" /> <label>First Aid</label> </div> <div> <input type="number" name="attr_hide" /> <label>Hide*</label> </div> <div> <input type="text" name="attr_lang1" /> </div> <div> <input type="number" name="attr_lang1" /> <label>Language/Lore</label> </div> <div> <input type="text" name="attr_lang2" /> </div> <div> <input type="number" name="attr_lang2" /> <label>Language/Lore</label> </div> <div> <input type="text" name="attr_lang3" /> </div> <div> <input type="number" name="attr_lang3" /> <label>Language/Lore</label> </div> <div> <input type="text" name="attr_lang4" /> </div> <div> <input type="number" name="attr_lang4" /> <label>Language/Lore</label> </div> <div> <input type="number" name="attr_listen" /> <label>Listen*</label> </div> <div> <input type="number" name="attr_medicine" /> <label>Medicine</label> </div> <div> <input type="number" name="attr_navspace" /> <label>Navigate: Space</label> </div> <div> <input type="number" name="attr_navsurface" /> <label>Navigate: Surface</label> </div> <div> <input type="number" name="attr_psych" /> <label>Psychology</label> </div> <div> <input type="number" name="attr_biology" /> <label>Science: Biology</label> </div> <div> <input type="number" name="attr_chemistry" /> <label>Science: Chemistry</label> </div> <div> <input type="number" name="attr_geology" /> <label>Science: Geology</label> </div> <div> <input type="number" name="attr_physics" /> <label>Science: Physics</label> </div> <div> <input type="number" name="attr_social" /> <label>Science: Social</label> </div> <div> <input type="number" name="attr_see" /> <label>See*</label> </div> <div> <input type="number" name="attr_build" /> <label>Technical: Build and Repair</label> </div> <div> <input type="number" name="attr_knowhow" /> <label>Technical: Know How</label> </div> <div> <input type="number" name="attr_tracking" /> <label>Tracking</label> </div> <div> <input type="number" name="attr_survival" /> <label>Wilderness Survival</label> </div> </div> <!-- BALANCE SKILLS --> <div class="sheet-col"> <!-- BALANCE SKILLS --> <label>BALANCE SKILLS</label> <div> <input type="number" name="attr_climb" /> <label>Climb*</label> </div> <div> <input type="number" name="attr_fisticuffs" /> <label>Fisticuffs*</label> </div> <div> <input type="number" name="attr_lockpick" /> <label>Lockpicking</label> </div> <div> <input type="number" name="attr_air" /> <label>Pilot: Air</label> </div> <div> <input type="number" name="attr_land" /> <label>Pilot: Land</label> </div> <div> <input type="number" name="attr_sea" /> <label>Pilot: Sea</label> </div> <div> <input type="number" name="attr_space" /> <label>Pilot: Space</label> </div> <div> <input type="number" name="attr_ride" /> <label>Ride Animal</label> </div> <div> <input type="number" name="attr_sleight" /> <label>Sleight of Hand</label> </div> <div> <input type="number" name="attr_sneak" /> <label>Sneak*</label> </div> <div> <input type="number" name="attr_throw" /> <label>Throw*</label> </div> <div> <input type="number" name="attr_bow" /> <label>Weapon: Bow</label> </div> <div> <input type="number" name="attr_heavy" /> <label>Weapon: Heavy Weapons</label> </div> <div> <input type="number" name="attr_melee" /> <label>Weapon: Melee</label> </div> <div> <input type="number" name="attr_raygun" /> <label>Weapon: Ray Gun</label> </div> <div> <input type="number" name="attr_tacticle" /> <label>Weapon: Tacticle</label> </div> <div> <input type="number" name="attr_zerog" /> <label>Zero-G Training</label> </div> </div> <!-- BRAWN SKILLS, BRAVADO SKILLS --> <div class="sheet-col"> <!--BRAWN SKILLS --> <label>BRAWN SKILLS</label> <div> <input type="number" name="attr_endure" /> <label>Endure*</label> </div> <div> <input type="number" name="attr_heave" /> <label>Heave*</label> </div> <div> <input type="number" name="attr_jump" /> <label>Jump*</label> </div> <div> <input type="number" name="attr_swim" /> <label>Swimming</label> </div> <!-- BRAVADO SKILLS --> <label>BRAVADO SKILLS</label> <div> <input type="number" name="attr_admin" /> <label>Administration</label> </div> <div> <input type="number" name="attr_animal" /> <label>Animal Handling</label> </div> <div> <input type="number" name="attr_backbone" /> <label>Backbone*</label> </div> <div> <input type="number" name="attr_explosives" /> <label>Explosives</label> </div> <div> <input type="text" name="attr_perform" /> </div> <div> <input type="number" name="attr_perform" /> <label>Perform</label> </div> <div> <input type="number" name="attr_bargain" /> <label>Pursuade: Bargain</label> </div> <div> <input type="number" name="attr_bluff" /> <label>Pursuade: Bluff</label> </div> <div> <input type="number" name="attr_charm" /> <label>Pursuade: Charm</label> </div> <div> <input type="number" name="attr_debate" /> <label>Pursuade: Debate</label> </div> <div> <input type="number" name="attr_intimidate" /> <label>Pursuade: Intimidate</label> </div> <div> <input type="number" name="attr_lead" /> <label>Pursuade: Leadership</label> </div> <div> <input type="number" name="attr_streetwise" /> <label>Streetwise</label> </div> </div> </div><!-- ADDED CLOSING DIV TAG --> <textarea name="attr_equipment"></textarea> <label>Equipment</label><!-- REMOVED EXTRA CLOSING LABEL TAG --> </div>

Thanks so much Brian! That worked like a dream!