CSS 3 columns checkbox

[dk4210]

Hello Guys,

 

I am trying to make 3 columns of checkboxes but not sure how to do it.. Currently it is just doing one column.. Any ideas?

 

PHP code

$result2 = mysql_query("SELECT * FROM benefits WHERE b_status='1' ");
if($result2){

while($r = mysql_fetch_array($result2)){

echo "<div class=\"cbwrapper\"><label><input type=\"checkbox\" name=\"keys[]\" value=\"".$r["b_id"]."\">".$r["b_name"]."</option></label>
</div>
  <div class=\"clear\"></div><p>

";

}

}

Here is my css

 

.cbwrapper {
margin-left:20px;
border:dashed;
width:160px;
padding:5px;
border-width:1px;
border-color:#8F8F8F;
background-color:#FFFBEF;
}

#cbwrapper label {
float:left;

}

 

 

 

[denno020]

Move your float:left; into the class definition for cbwrapper.

 

To be able to have your CSS targeting the part that you want, you need to put .cbwrapper instead of #cbwrapper, as you have now. But you won't get a very nice display, so just move the float instruction to where I said above.

 

You might also want to define the class clear, if you haven't already in another part of your stylesheet.

 

Denno

[denno020]

Sorry you will also need some php coding as follows:

 

echo '<div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="'.$r["b_id"].'">'.$r["b_name"].'</option></label></div>';
$i++;
if(($i%3) == 0){
echo '<div class="clear"></div>';
}

 

Define a variable $i to keep track of how many items have been printed, and every time this number is divisible by 3 with no remainder, then you want to print the clear line.

 

Denno

[raknjak]

- use mysql_fetch_assoc for faster loading times

- what is the </option> doing here?

 

What I think you want to do is float every <div> element to the left, except when you count a third element, then clear the float on the next element so that you can work with a random number of results.

 

<div id="cbwrapper">
  <div class="floatleft"><label><input type="checkbox" /></label></div>
  <div class="floatleft"><label><input type="checkbox" /></label></div>
  <div class="floatleft"><label><input type="checkbox" /></label></div>
  <div class="clearboth floatleft"><label><input type="checkbox" /></label></div>
  <div class="floatleft"><label><input type="checkbox" /></label></div>
  <div class="floatleft"><label><input type="checkbox" /></label></div>
  etc...
</div>

.floatleft{float: left;}
.clearboth{clear: both;}

 

You could do this by adding a counter $i=1, check for $i%3 == 0 and if this is true then add .clearboth to the next div being echoed.

 

Anyone better then me with PHP might have a more elegant solution?

 

(Edit: beaten)

[dk4210]

Thanks guys I will give it a try..

[dk4210]

Hello Guys,

 

I still cant get this right.. Could I get a little more help..

Here is my code

 

 

while($r = mysql_fetch_array($result2)){

echo '<div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="'.$r["b_id"].'">'.$r["b_name"].'</option></label></div>';
$i++;
if(($i%3) == 0){

echo '<div class="clearboth">test</div>';

 

It does display the test every 3rd one which is cool but it won't clear:both for some reason..

 

Any advice would be helpful..

 

Thanks, Dan

 

 

This is what i am trying to do - http://screencast.com/t/WpVN6a8mkQj

[dk4210]

Here is the source

 

<div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="1">Medical Insurance</option></label></div><div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="2">Dental Insurance</option></label></div><div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="3">Life Insurance</option></label></div><div class="clearboth">test</div><div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="4">Disability Insurance</option></label></div><div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="5">Retirement / Pension Plans</option></label></div><div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="6">Company Car</option></label></div><div class="clearboth">test</div><div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="7">Company Uniform</option></label></div><div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="8">Direct deposit Payroll</option></label></div><div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="9">Gym Membership</option></label></div><div class="clearboth">test</div><div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="10">Flexible Spending Accounts</option></label></div><div class="cbwrapper"><label>

 

Seems to be adding the clear to an empty <div>

[denno020]

Have you actually written the 'clearboth' class? In your original post, this CSS class wasn't included, and I suggested that you should add it to your stylesheet, if you hadn't already. Just giving a div a class of clearboth won't mean it will clear, unless you specify what is included in the class clearboth in the stylesheet.

 

As for the empty div, that's the whole point. The empyt div is effectively invisible in the layout, and just acts as a place for the clear to be applied.

 

If you still can't figure it out, post your CSS code, all of it.

 

Denno

[dk4210]

Hi Denno,

 

Here is my entire css file - http://pastebin.com/bLZf8UaV

 

Here is my function - http://pastebin.com/VPdnbZMi

 

Thanks for all your help!

[denno020]

Remove the word test from the div that is clearing.

 

If that's not the problem, then it's hard to figure out. It looks like what I had, but it's obviously not as it doesn't work :S. Here is the test code that I was using:

<html>
<head>
<title>3 Columns</title>

<style type="text/css">
.cbwrapper {
margin-left:20px;
border:dashed;
width:160px;
padding:5px;
border-width:1px;
border-color:#8F8F8F;
background-color:#FFFBEF;
float:left;
}


.clear{
clear:both;
}
</style>

</head>
<body>

<?php
$i=0;
while($i < 10){

echo '<div class="cbwrapper"><label><input type="checkbox" name="keys[]" value="'.$i.'">'.$i.'</option></label></div>';
$i++;
if(($i%3) == 0){
echo '<div class="clear"></div>';
}

}

?>
<div class="clear"></div>

</body>
</html>

So if you have a look at that, maybe you'll notice something you've omitted that I'm not noticing.

 

Denno

[denno020]

Ahhhh. I just noticed it. You're not doing any floating at all!.

 

Find this:

#cbwrapper label {
        float:left;
       
}

 

And change it to this:

.cbwrapper label {
        float:left;
       
}

Note the full stop at the start instead of the hash.

 

Denno

[dk4210]

That worked!!!! Thanks for all your help..

 

http://screencast.com/t/cBL04S816