如何设置垂直线位置？

Question

我使用下面的代码来分隔“数字”和“描述”列，现在我的问题是如何将这个垂直线位置放在我想要的位置，让我在下面的步骤中进行清楚描述。

总宽度为580px，两列共享此580宽度，一个是“数字”，仅使用50px，另一个是“描述”需要使用530px

这是代码：

<div
style="width:1px;height:200px;background-color:black;float:left;"></div>

如果有人能稍微修改这个脚本并给出正确的代码，我将非常感激，图片示例如下。

http://www.image-maps.com/PHP_Map_Image.php

注：

我需要在DIV标签下面的脚本

<table style="width: 580px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr bgcolor="#ffd700">
<td width="50"></td>
<td align="center" bgcolor="#cc3399" width="230">main content cell</td>
</tr>
<tr bgcolor="#ffd700">
<td width="50"></td>
<td align="center" bgcolor="#cc3399" width="230">main content cell</td>
</tr>
<tr bgcolor="#ffd700">
<td width="50"></td>
<td align="center" bgcolor="#cc3399" width="230">main content cell</td>
</tr>
</tbody>
</table>

Answer 1

更新演示

http://jsfiddle.net/yeyene/xUCPL/3/

HTML

<div class="main">
    <div class="number">100</div>
    <div class="description">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
</div>

CSS

.main {float:left;width:580px;background:red;}
/* width change to 40, bcoz of padding */
.number {width:40px;float:left;padding:5px;} 
/* width change to 519, bcoz of border and padding */
.description{width:519px;float:left;border-left:1px solid #000;padding:5px;}