[Solved] HTML Table To Div and CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

[Solved] HTML Table To Div and CSS

Post by hawleyjr »

Alright, this is probably easy...However...too much work makes the brain fried...

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>
However, I'd like to use Div tags instead so this is what I've tried:

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>
My problem is that I'm having trouble keeping the labels/form elements in line...

Any ideas?
Last edited by hawleyjr on Tue Sep 27, 2005 9:29 am, edited 1 time in total.
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

Post by hawleyjr »

Alright, in case anyone else has this problem. Here is how I got it to work...

Code: Select all

<style type="text/css">

#container {
	display:block; 
}
#left {
	float:left; 
	position:relative; 
	width:125px; 
	left:0px;
}
#right {
	float:left; 
	position:relative; 
	width:190px; 
	right:0px;
}

.clear {clear:left;}

</style>


<div id="container"> 
  <div id="left">Item No. 1:</div>
  <div id="right"> 
    <input name="text_1" type="text" value="3">
  </div>
</div>
<br class="clear" />
<div id="container"> 
  <div id="left">Item Number 2 with a longer label:</div>
  <div id="right"> 
    <select name="sel_name"><option />Option 1<option />Option 2<option />Option 3</select>
  </div>
</div>
<br class="clear" />
Post Reply