Web Analytics Made Easy -
StatCounter Help aligning checkboxes - CodingForum


No announcement yet.

Help aligning checkboxes

  • Filter
  • Time
  • Show
Clear All
new posts

  • Help aligning checkboxes

    Hiya all.
    I'm relatively new to HTML and CSS. I am trying to create a form and have all the checkboxs aligned in a verticle row in the center of the page, but at the moment they are not and they are wrapping back to the very left of the page. I was wondering if anyone could help with this problem as its driving me mad!
    Thanks very much for your help,

    <div class="row" id="hobbies">
                        <span class="label">
                                <label for="hobbies">Your hobbies/intrests:</label>
                            <span class="formw">
                                Animals<input type="checkbox" name="animals" value="yes" /><br/>
                               Arts and Crafts<input type="checkbox" name="aac" value="yes" /><br/>
                               Collecting<input type="checkbox" name="collecting" value="yes" /><br/>
                               Culture<input type="checkbox" name="culture" value="yes" /><br/>
                               DIY<input type="checkbox" name="diy" value="yes" /><br/>
                               Electronics and computing<input type="checkbox" name="eac" value="yes" /><br/>
                               Food and Wine<input type="checkbox" name="faw" value="yes" /><br/>
                               Gardening<input type="checkbox" name="gardening" value="yes" /><br/>
                               Health and personal development<input type="checkbox" name="hapd" value="yes" /><br/>
                               History<input type="checkbox" name="history" value="yes" /><br/>
                               Language and literature<input type="checkbox" name="lal" value="yes" /><br/>
                               Music<input type="checkbox" name="none" value="yes" /><br/>
                               None<input type="checkbox" name="none" value="yes" /><br/>
                               Sport<input type="checkbox" name="sport" value="yes" /><br/>
                                <label for="hOther">Other  </label>
    							<input type="text" size="20" maxlength="20" name="otherHob" id="oHob" />
                                <br />
                                <br />
    div.row span.formw {float: center;
    				 text-align: left;}

  • #2
    There is no float: center;. And text-align: left does exactly what it says: aligning text left. Form controls are inline elements, by the way, and treated like text for that matter.

    Also I don’t see any form element (which you need to use form controls) and you don’t use labels correctly.

    <form id="hobbies" action="" method="get">
    		<legend>Your hobbies/intrests:</legend>
    			<label [COLOR="Red"]for="animals"[/COLOR]>Animals</label><input [COLOR="Red"]id="animals"[/COLOR] type="checkbox" name="animals" value="yes" /><br/>
    			<label for="aac">Arts and Crafts</label><input type="checkbox" name="aac" id="aac" value="yes" /><br/>
    			<label for="collecting">Collecting</label><input type="checkbox" name="collecting" id="collecting" value="yes" /><br/>
    			<label for="culture">Culture</label><input type="checkbox" name="culture" id="culture" value="yes" /><br/>
    			<label for="diy">DIY</label><input type="checkbox" name="diy" id="diy" value="yes" /><br/>
    		<input type="text" size="20" maxlength="20" name="otherHob" id="oHob" />
    This is how a correct form looks like. Labels must be associated with a form control, either by wrapping them around those or by having the value of the for attribute match the value of the form control’s ID. You can then style it with CSS according to your needs (i. e. hide fieldset borders, margins, and paddings, align elements, etc.

    For the alignment of the checkboxes you can either apply a left padding or margin to the surrounding div or you apply a width to that div and assign margin: auto;
    Last edited by VIPStephan; Apr 2, 2009, 09:37 AM.
    Stop solving problems you don’t yet have!


    • #3
      Thanks for those tips VIPStephan. I got the examples for labeling off another website. I can see that your approach is much simpler.

      Thanks again