I'm trying to create an online quiz. The question is a single word and then has 9 fields to be filled up. How to make columns with equal width? Can or should it be done with span/div or should I use a table?

<div class="question">
    <span class="text">word</span>
    <span class="answer">
        <input type="text" />
        <input type="hidden" value="expectedAnswer" />
        <img src="" alt="" />

I've written some JavaScript to validate the anwers. It goes through appropriate spans and checks the input value with the expected value and will display some image if the answer is wrong.

1 answer

This was chosen as the best answer

Personally, I'd suggest that you refrain from using tables; this can easily be done using divs or spans depending on the context. In your style sheet, create a class and set it's properties as so:

.answer {
 float: left;    /* Don't forget to clear your floats! (if necessary, of course) */
 width: 10%;

(add display:inline-block; if you choose to use spans)

I wasn't sure if you wanted to have two rows with 5 columns each, or whatever, but the example above is applicable if you wanted all 10 columns vertically aligned with one another. I'm not quite sure how it would look, it could look a bit slim and feel a bit crammed, but you'll only gain from playing around with it until you're comfortable with how it looks.

If you feel that you can make for a good argument that this is tabular information/data, then in this case, tables would be sufficient. However, there isn't much to say without knowing the scope of the project in it's entirety.

Answered over 8 years ago by Vinny Burgh
  • Thanks! I started to think that it wasn't doable with divs. I found some generators, but they would require me to set a separate class for each column and thats far from maintanable. I'm not proficient in CSS, so could you please tell me what does it mean to clear the floats or when should I do it? Stefan over 8 years ago
  • Oh, think I've got it! If I want to add another question, I need to add the clear property to the question class. Stefan over 8 years ago
  • No problem. In your style-sheet, just write clear:both; You shouldn't have to create a different class for each column; if you needed to select different columns, using selectors in jQuery should be sufficient enough (and probably more desirable). To clear the floats of the "answer" columns, immediately following the divs, write something to the effect of <br style="clear:both" /> or <div style="clear:both"></div> Vinny Burgh over 8 years ago