CSS/HTML: How to achieve a structure like table without using table?

Question

I have found few similar questions on stackoverflow but none of them seems to provide a real clear solution for my case.

I hope with a screenshot I can show the pain with using a table:

The bottom two rows are defined as tr and td within a table. The structure is perfect and alignment of the labels and textfields are perfect. However if I wanted to style a well class (eg <div class='well'> ... </div> ) around only two rows, the table approach would fail. Simply because you are not allowed having any div inside a table, which is only excepting tr and td .

So I took the first two rows out of the table and made it as pure divs. You can see the result as the first two rows above in the grey well.

<div class='well'>
  <div>
    <div class='block_inline'> ... </div>
    <div class='block_inline'> ... </div>
  </div> 
  <div>
    <div class='block_inline'> ... </div>
    <div class='block_inline'> ... </div>
  </div>
</div>

In itself the well class is now beautifully rendered around the two rows, however the alignment is now a mess. How can I make them still be centred and have the text-fields to be aligned vertically next to each other?

Answer 1

To get this effect with using divs, you just us the the display property with table, table-row and table-cell:

HTML:

<div class='well'>
  <div class="row">
    <div class='block_inline'> Title </div>
    <div class='block_inline'> ... </div>
  </div> 
  <div class="row">
    <div class='block_inline'> Due Date Time </div>
    <div class='block_inline'> ... </div>
  </div>
</div>​

CSS:

div
{
    border: 1px solid #333;
}

.well
{
    display: table;
    width: 70%;
}

.row
{
    display: table-row;
}

.block_inline
{
    display: table-cell;
    width: 50%;
}

This mimics the behaviour of a table, but leaves the markup nice and semantic. This is also useful for solving "remaining space columns" issues :)

http://jsfiddle.net/Kyle_Sevenoaks/e7VeU/

Answer 2

Well first of all the semantics are a mess.. this is how i do it:

<form>
    <div class="row">
        <label for="input_1">Title</label>
        <input type="text" name="input_1" id="input_1">
    </div>
    <div class="row">
        <label for="input_2">Due date time*</label>
        <input type="text" name="input_2" id="input_2">
    </div>

</form>

with style:

div.row {
    clear: both;
}

label {
    display: inline-block;
    width: 300px;
}

input {
    display: inline-block;
}

Make adjustments where neccesary.

The use of div class="row" could be replaced by fieldsets and definition lists. Take a look at http://www.gethifi.com/blog/html-forms-the-right-ways for that.

Answer 3

I like to use ULs for form layout: http://jsfiddle.net/BKgB9/

<form>
 <div>
    <ul>
        <li><label>Type:</label><input type="text" /></li>
        <li><label>Reminder:</label><input type="text" /></li>
    </ul>
 </div>
</form>

div {
 background:#dcdcdc;
 border:1px solid #999;
 padding:20px;
 display:inline-block;
}

div ul li {
 margin-bottom:10px;
}

div ul li label {
 float:left;
 width:85px;
}

Answer 4

You can also try this method

<div class="first">
<div class="line1">
   <label>One</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
    </div>
    <div class="line2">
    <label>two</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>
<div>

Demo; fiddle