-3

I need to display four checkbox as following

        A           B
        C           D

There should be two in each line? Can anyone suggest what would be right css for this? They need to be inside or combination of Div

InTheWorldOfCodingApplications
  • 2,526
  • 6
  • 46
  • 87

3 Answers3

2

If this is just a fixed file and doesn't need to be content-managed, I'd use columns for ease of use. If it needs to be content-managed and the content is likely to change then I'd go for dealing with rows.

http://jsfiddle.net/FUJMS/5/

HTML:

<html>

    <div class="column one">
        <div class="box A"></div>
        <div class="box C"></div>
    </div>

    <div class="column two">
       <div class="box B"></div>
       <div class="box D"></div>
   </div>

</html>

CSS:

div.column {
    width:50%;
}

div.column.one {
    float:left;
}

div.column.two {
    float:right;
}

div.box {
    width:40px;
    height:40px;
}
Kyuuji
  • 744
  • 5
  • 12
  • There is no column two in css – InTheWorldOfCodingApplications Jul 08 '13 at 11:17
  • I know, it should fill the space by - and be brought in line with - the floated element. Now that you've mentioned it I'm starting to doubt myself, either way the second would just need a float applied. – Kyuuji Jul 08 '13 at 13:17
  • Done, just needed the float as I said. I'd missed a ';' after the widths, which threw me a bit. – Kyuuji Jul 08 '13 at 14:12
  • Okami, why do you use two classes: "box A"? Did you mean "boxA" or "box_A", didn't you? Or what sense makes those classes? – Stano Jul 08 '13 at 17:13
  • So you can apply a generic class for them all tp save CSS, but differentiate them if need be through the letters. – Kyuuji Jul 09 '13 at 12:35
1
<style>
  .item {white-space: nowrap;display:inline; }
</style>
<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">a</label>
</div>
<div class="item">
   <input type="checkbox" id="b">

    <label for="b">b</label>
</div>
<br/> //link break or anything you like
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">c</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">D</label>
</div>
</fieldset>

This should work for you with slight minor changes if you feel. Thanks.

Chiragit007
  • 1,646
  • 2
  • 16
  • 31
1

One of possible solutions is to put the checkbox inside the label tag

<label for="cb1"><input id="cb1" name="cb1" type="checkbox" /> checkbox1 </label>
<label for="cb2"><input id="cb2" name="cb2" type="checkbox" /> checkbox2 </label>
<label for="cb3"><input id="cb3" name="cb3" type="checkbox" /> checkbox3 </label>
<label for="cb4"><input id="cb4" name="cb4" type="checkbox" /> checkbox4 </label>

and stylize it as follows

label {
    display:block;
    width:50%;
    *width:49%; /*for IE7 only*/
    float:left;
}
label[for="cb3"] {
    clear:left;
}

Thanks to Liam for calling attention to this SO question: Should I put input tag inside label tag?.
Now the answer is compatible with screenreaders and IE7.

jsfiddle

Community
  • 1
  • 1
Stano
  • 8,749
  • 6
  • 30
  • 44
  • Is this a good idea? I'm not convinced a label should contain an input – Liam Jul 08 '13 at 11:11
  • Yes you can http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag. But it feels dirty to me... – Liam Jul 08 '13 at 11:13
  • 1
    I wasn't aware that putting anything inside a ` – Andrew Barber Jul 08 '13 at 15:10
  • Also one question related to IE7 pixel-width-rounding: http://stackoverflow.com/questions/1309964/how-to-fix-internet-explorer-7-bug-when-using-percentage-widths-for-layout#1310448 – Stano Jul 08 '13 at 17:18