I would like to have 2 columns of checkboxes. The first column is aligned automatically. However, I am not sure how to align the second column. I tried using &-n-b-s-p-; (i had to insert the dashes or else it showed up as a space in this question) but have been unsuccessful. HTML or CSS hints would be appreciated.<br />
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
You should upgrade or use an alternative browser.
HTML question- how do you vertically align checkboxes?
- Thread starter LaneyK
- Start date
The quick and easy way is using tables.<table><tr><td><input type="checkbox" name="c1" /></td><td><input type="checkbox" name="c2" /></td></tr></table>
That will produce 2 columns of checkboxes. This will put them directly next to each other. Add a width to the TABLE tag to set them apart.
You can do the same with CSS.
In the HEAD
<style>
#container {width 250px;}
.holder {float left; width 125px;}</style>
In the FORM
<div id = "container"><div class = "holder"><input type="checkbox" name="c1" /></div><div class = "holder"><input type="checkbox" name="c2" /></div></div>
Just keep adding more holder DIVs and they'll line up in two columns.
That will produce 2 columns of checkboxes. This will put them directly next to each other. Add a width to the TABLE tag to set them apart.
You can do the same with CSS.
In the HEAD
<style>
#container {width 250px;}
.holder {float left; width 125px;}</style>
In the FORM
<div id = "container"><div class = "holder"><input type="checkbox" name="c1" /></div><div class = "holder"><input type="checkbox" name="c2" /></div></div>
Just keep adding more holder DIVs and they'll line up in two columns.