PDA

View Full Version : How do I align checkboxes horizontally?



xerox02
Jul 13th, 2010, 11:18 AM
HTML:


<div id="cat">
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
</div>


CSS:


#cat
{
float: left;
width:100 px;
height:50 px;
}​

Thanks,
Xerox02

abduraooft
Jul 13th, 2010, 11:29 AM
#cat label{
float:left;
}

<div id="cat">
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
...</div>

xerox02
Jul 13th, 2010, 11:32 AM
#cat label{
float:left;
}

<div id="cat">
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
...</div>


thanks a lot :)

Also, if the amount of checkboxes I have exceeds the width or height of a div, how can I set it up so that it will go to the next column or next row?

abduraooft
Jul 13th, 2010, 11:38 AM
In the above setup, I believe they will automatically wrap to the next line, when there is no available space.

xerox02
Jul 13th, 2010, 11:46 AM
In the above setup, I believe they will automatically wrap to the next line, when there is no available space.

When I run :


<style type="text/css">
#cat label{
float:left;
width: 10px;
height: 50px;
}
</style>

<div id="cat">
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
....
</div>

It looks like this:
http://img200.imageshack.us/img200/1971/testerr.png

abduraooft
Jul 13th, 2010, 11:53 AM
Also, if the amount of checkboxes I have exceeds the width or height of a div,

#cat label{
float:left;
width: 10px;
height: 50px;
}

Are you asking about the width of label? Then give some breathing space like
#cat label{
float:left;
width: 3em;
text-align:center;
padding:.2em;
}

xerox02
Jul 13th, 2010, 03:08 PM
Are you asking about the width of label? Then give some breathing space like
#cat label{
float:left;
width: 3em;
text-align:center;
padding:.2em;
}

How do I make it so the checkboxes get to the next row also?
I got it to working by making a new div, and it went to the next row.

Is there a way do to this without making a new div?

VIPStephan
Jul 13th, 2010, 03:26 PM
Floated elements automaticall wrap to the next line if there is no space for them to fit in the current line. You don’t need a div. If you want real help then provide your entire code. This way we don’t have to guess what you want by asking general questions.

xerox02
Jul 13th, 2010, 03:42 PM
Floated elements automaticall wrap to the next line if there is no space for them to fit in the current line. You donít need a div. If you want real help then provide your entire code. This way we donít have to guess what you want by asking general questions.

Here's the entire code:

<style type="text/css">
#cat label{
float:left;
width: 10px;
height: 50px;
}
</style>

<div id="cat">
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
</div>

abduraooft
Jul 13th, 2010, 03:51 PM
I got it to working by making a new div, and it went to the next row. Please provide your "working" code so that we can think about alternatives!

xerox02
Jul 13th, 2010, 04:05 PM
Please provide your "working" code so that we can think about alternatives!

haha sure, sorry.


<div id="cat">
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
</div>
<div id="cat">
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
<label><input type="checkbox" name="option3" value="Cheese"> Cheese</label>
</div>

VIPStephan
Jul 13th, 2010, 08:53 PM
And now please provide your entire working code. That is everything from line 1 until the </body> tag in your HTML file plus all entire stylesheets.