[Solved] HTML Table To Div and CSS
Posted: Mon Sep 26, 2005 10:14 pm
Alright, this is probably easy...However...too much work makes the brain fried...
Typically when creating web form I'll use tables such as:
However, I'd like to use Div tags instead so this is what I've tried:
My problem is that I'm having trouble keeping the labels/form elements in line...
Any ideas?
Typically when creating web form I'll use tables such as:
Code: Select all
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="111">Item Number 1:</td>
<td width="374">
<input name="text_1" type="text" value="3"></td>
</tr>
<tr valign="top">
<td>Item Number 2 with a longer label:</td>
<td>
<select name="sel_name"><option />Option 1<option />Option 2<option />Option 3</select></td>
</tr>
</table>Code: Select all
<div class="form_holder">
<div class="form_item_holder"><span class="form_item_label">Item No. 1:</span><span class="form_item"><input name="text_1" type="text" value="3"></span></div>
<div class="form_item_holder"><span class="form_item_label">Item Number 2 with a longer label:</span><span class="form_item"><select name="sel_name"><option />Option 1<option />Option 2<option />Option 3</select></span></div>
</div>
<style>
.form_holder{
border: 1px solid red;
width: 450px;
padding: 5px;
}
.form_item{
padding-left: 5px;
width: 100%;
}
.form_item_label{
padding-right: 5px;
width: 111px;
color: brown;
text-align: left;
}
.form_item_holder{
border-bottom: 1px solid blue;
padding-top: 5px;
padding-bottom: 2px;
}
</style>Any ideas?