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

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 (e.g. <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