Question

HTML code

<div  id=checkbox>
    <div id=groupfour>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Jan" id="EJan">
            <label>Jan </label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Feb" id="EFeb">
            <label>Feb</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Mar" id="EMar">
            <label>Mar</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Apr" id="EApr">
            <label>Apr</label>
        </div>
    </div>

    <div id=groupfour>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="May" id="EMay">
            <label>May</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Jun" id="EJun">
            <label>Jun</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Jul" id="EJul">
            <label>Jul </label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Aug" id="EAug">
            <label>Aug</label>
        </div>
    </div>

CSS Code

#groupfour
{
    position:relative;
    vertical-align: bottom;
}

I want to group my checkboxes of months in group of four in three rows . This way its coming in a vertical list of months .If I remove internal div checkboxes are not alligned in all three rows .

Answer 1

Check this JSBIN

Its very very basic way to make this