Question

I need a web page with this:

+-------+-------------------+
| label | [] a checkbox     |
+-------+ with a big text.  |
        +-------------------+

I have this HTML:

<div class="outer">
    <label>label</label>
    <div class="box">
        <input type="checkbox"> a checkbox with a big text
    </div>
</div>

And this CSS:

.outer { clear: both; width: 400px; }
label { float: left; width: 100px; }
.box { dislay: table; /* also works with table-cell */ }

Notice that I’m using display: table to avoid this:

+-------+-------------------+
| label | [] a checkbox     |
+-------+                   |
| with a big text           |
+---------------------------+

The box div will not have any table rows or cells – just some flow content (a check box and some text, for now).

My question: Is it adequate to use display: table, or should I use display: table-cell even without an outer display: table element? Suppose in the future someone chooses to put all this inside a table element, or a display: table element? Which display option would be more robust?

Answer 1

Try this HTML:

<div class="outer">
    <div class="left-col">
        <label>label</label>
    </div>
    <div class="right-col">
        <input type="checkbox"> a checkbox with a big text
    </div>
</div>

With this CSS:

.outer { clear: both; width: 400px; }
.left-col { float: left; width: 100px; }
.right-col{ float: left; width: 300px; }

You may need to have a fixed height for both columns