Question

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 1

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;