CSS - Align numbers above checkboxes?

Question

I am creating a feedback system, were there are questions with 5 check boxes for "Unwilling", "Not Ready", "Ready", "Completely Ready" etc...

Each check box is numbered from 1 to 5 above the check boxes. Since the client needs to add different labels for the check boxes, their lengths will be different so this needs to change with CSS rather than be fixed.

Here was a photoshop mock-up from our designer of what I am suppose to create in CSS.

https://i.stack.imgur.com/Y8XyG.jpg

How could I align the numbers above the check box like this?

I already have the outside box, and the start of the number part:

CSS:

.questionBlock {
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width: 700px;
    min-height: 40px;
    background-color: rgb(246,246,246);
    margin-top: 20px;
    background-image: url('../images/bar.png');
    background-repeat: repeat-x;
    padding: 4px 0 0 10px;
}
.questionBlockExpand {
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width: 700px;
    height: 100px;
    background-color: rgb(246,246,246);
    margin-top: 20px;
    padding: 10px 0 0 10px;
    margin-top: 20px;
}
    .innerQuestionBlock {
        postion:relative;
        width:650px;
        background-color:rgb(204,204,204);  
        padding:5px 5px 5px 5px;
    }

HTML:

<div class="questionBlock">At the end of the session ask the Feedback Recipient the following question:
    <div class="arrow" id="arrowsection1" onclick="toggle_visibility('section1');"></div>
    <div class="questionBlockExpand" id="section1" style="display:none;">
        <div class="innerQuestionBlock"><span class="red">1 2 3 4 5</span>

        </div>
    </div>
</div>

Am I correct in thing I need to add a DIV for each checkbox? then overlay the text on top of them? — MRC, Dec 23 '13 at 13:17
The simpliest way to do it would be to use a `table`. The only thing you got to do is to style differently the three rows. The second one should have `colspan="5"`, in order to display the "How ready do you feel to take action" text correctly. — OlivierH, Dec 23 '13 at 13:28
would the question be very long sometimes ? I would suggest you to use labels after or before the checkboxes anyway, using for="id", it boosts the usability as when you click on the label it's triggering the checkbox itself as well this way — aleation, Dec 23 '13 at 14:02
@aleation My intention was to do this eventually with labels. — MRC, Dec 23 '13 at 14:15

score 2 · Answer 1 · edited Dec 23 '13 at 13:31

2

Looking at mock-up i would use a table

<table>
<tr>
   <td>11</td>
   <td>2</td>
   <td>3</td>
   <td>4</td>
   <td>5</td>
</tr>

<tr>
   <td colspan="5">Some other content comes here<td>
</tr>

<tr>
   <td><input type="checkbox">Lorem</td>
   <td><input type="checkbox">Ipsum</td>
   <td><input type="checkbox">Dolor</td>
   <td><input type="checkbox">Lorem</td>
   <td><input type="checkbox">Amit</td>
</tr>

</table>

edited Dec 23 '13 at 13:31

NoobEditor

15,563
19
81
112

answered Dec 23 '13 at 13:27

AbsarAkram

336
3
11

Thanks, Using a table suddenly makes perfect sense! – MRC Dec 23 '13 at 13:29
i would strongly recommend against it...`table` is outdated in most places and you have options like `display:table` nowdays!! – NoobEditor Dec 23 '13 at 13:31
@Mayank Is there an alternative? – MRC Dec 23 '13 at 13:33
@Mayank yet `` is fine in this scenario. we're not using it for a full page layout.
– AbsarAkram Dec 23 '13 at 13:46
@Absar I don't think so. It's definitely not a table just a layout that might seen "table-ish" so if it can be done it should be done without tables. – Laszlo Dec 23 '13 at 13:52
@Absar : its not about the layout mate.....its about the layout designed with most up-to-date standards... – NoobEditor Dec 23 '13 at 14:03
@Mayank So many different fiddles and methods! Not sure whether to use CSS or Table?! – MRC Dec 23 '13 at 14:32
@Joey : its simple.....avoid table...read this thread => http://stackoverflow.com/questions/2867476/why-should-i-use-displaytable-instead-of-table – NoobEditor Dec 23 '13 at 14:36

Laszlo · Accepted Answer · 2013-12-23T13:45:08.223

2

You can use percentage instead of px values. So let's say you have two lists (<ul>): one with the numbers and the other with the answers.

Both <ul> has width:100% so they will pick up the width of the parent element. In those lists each item has a width:20% (100% / 5 = 20%)

That will make it pretty dynamic, without using nasty tables.

Here's a JSfiddle too.

PS: bare in mind if you'd like to add padding to the items it has to be in percentage as well and the amount will reduce the width

edited Dec 23 '13 at 13:45

answered Dec 23 '13 at 13:36

Laszlo

2,225
19
22

Beautiful. I was about to post my JSfiddle but you beat me to it :P – Zera42 Dec 23 '13 at 13:40
what if one checkbox text have more text and can't fit a 20% of width where at same time another checkbox may require only 5% of width. look at given mockup a feel spacing between 1,2,3,4.. – AbsarAkram Dec 23 '13 at 13:50
@Absar: and how is your answer addressing that? have you checked it in a fiddle using this scenario? Moreover, tables are for tabular data not for layouts. – Abhitalks Dec 23 '13 at 13:55
@Absar: see: http://jsfiddle.net/F3LsL/5/ too much text will break it! anyway, thanks for the effort. – Abhitalks Dec 23 '13 at 14:11
Thanks everyone! Everything has been so helpful. I will likely use this method. – MRC Dec 23 '13 at 14:18

Abhitalks · Answer 3 · 2013-12-23T13:48:33.460

Would suggest you to use DIVs or ULs with display:table. Primary reason being, the info that you want to show is not tabular data semantically. It has to do more with layout.

See this fiddle: http://jsfiddle.net/F3LsL/1/

Idea is to use floated divs within a div for the counter numbers on the top with a pre-defined width. Then use either a list or another div to display your checkboxes with the same width.

For example:

div.counters > div {
    float: left;
    width: 20%;
    display: table-cell;
}

NoobEditor · Answer 4 · 2013-12-23T13:59:43.193

Simplest demo

simple idea is to draw table display and assign same style to both number and checkbox as below

css

.chkbx {
    width:100%;
}
.ratings {
    display:table;
    width:100%;
    border:1px solid #F00;
}
.ratings > span {
    display:table-cell;
    border:1px solid #000;
    width:20%;
}

HTML

<div class="chkbx">
    <div class="ratings"> 
        <span class="bx">1</span>
        <span class="bx">2</span>
        <span class="bx">3</span>
        <span class="bx">4</span>
        <span class="bx">5</span>

    </div>

    <div class="ftext"> Some full text here </div>

     <div class="ratings"> 
         <span class="bx">Lorem<input type="checkbox" /></span>
         <span class="bx">Lorem <input type="checkbox" /></span>
         <span class="bx">Lorem <input type="checkbox" /></span>
         <span class="bx">Lorem <input type="checkbox" /></span>
         <span class="bx">Lorem <input type="checkbox" /></span>

    </div>
<div>

Just realised it is supposed to be a ratio button, not check box! oops. — MRC, Dec 23 '13 at 14:34
@Joey : nope...i working on jsfiddle directly, dont have any editor except notepad ryt nw!! :) ~~~~~~~ and change checkbox to radio, that should not a be problem :) — NoobEditor, Dec 23 '13 at 14:45

CSS - Align numbers above checkboxes?

4 Answers4