codeadventurer codeadventurer - 6 months ago 29
HTML Question

Split checkboxes in fieldset into two columns

I'm trying to split up checkboxes in the same fieldset into two columns using CSS.

For example, my code is below:

<div id="topicsbox">
<label class="topicsname">Topics*</label>
<label class="description">Select topic areas for which you would like to receive future updates from CTU (articles, blog posts, white papers, etc.). Check all that apply:</label>
<div id="topicsmessage" class="messagebox"></div>

<fieldset>
<input type="checkbox" name="topics[]" id="AllTopStories" value="1098375" /><label for="AllTopStories">All Top Stories</label>
<input type="checkbox" name="topics[]" id="BusinessandManagement" value="1098376" /><label for="BusinessandManagement">Business and Management</label>
<input type="checkbox" name="topics[]" id="CareerandProfessional" value="1098377" /><label for="CareerandProfessional">Career and Professional</label>
<input type="checkbox" name="topics[]" id="CriminalJustice" value="1098378" /><label for="CriminalJustice">Criminal Justice</label>
<input type="checkbox" name="topics[]" id="HealthcareAdministration" value="1098379" /><label for="HealthcareAdministration">Healthcare Administration</label>
<input type="checkbox" name="topics[]" id="HomelandSecurity" value="1098380" /><label for="HomelandSecurity">Homeland Security</label>
<input type="checkbox" name="topics[]" id="ITEngineeringComputerScience" value="1098381" /><label for="ITEngineeringComputerScience">IT, Engineering, Computer Science</label>
</fieldset>
</div>


Does anyone know the correct CSS to split up this list into 4 input checkboxes on the left and 3 on the right?

Answer

How about setting the css for inputs and labels as follows:

  • Set proper width
  • Set display: inline-block

So that you escape the need for a clear div that you will need in case of just floating them

You can also go for the CSS3 solution of

-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
Comments