How to create table using div and span with solid line

I am trying to use css positioning <div> and <span> to relpace table. I am now facing a problem:

div.row {
  clear: both;
  padding-top: 5px;
  padding-bottom:5px;
  }

div.row span.label {
  float: left;
  width: 80px;
  text-align: left;
  border-style: solid;
  border-width: thin;
  }

div.row span.input {
  float: left;
  width: 250px;  
  text-align: left;
  border-style: solid;
  border-width: thin;
  }


<div style="width: 660px; background-color: #f8f8f8;border: 0px;">                  
    <div class="row">
      <span class="label">Customer ID:</span>
      <span class="input">
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA       </span>
      <span class="label">Customer Name:</span>
      <span class="input">
               BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
     </span>                       
</div>


As you can see from the code, there is a solid line around each span. However, span which contains "Customer ID:" has 1 line while the span which contains many "AAAA" is more than 1 line. As a result, the border line doesn't match with each other.
Would somebody please tell me how to solve the problem ?
mikekwokAsked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
If i understand the problem, you just need to eliminate one of the two borders.  So:
div.row span.input {
  float: left;
  width: 250px;  
  text-align: left;
  border-style: solid;
  border-width: thin;
  border-left:none;
  }

If that is not what you need I guess I don't understand and yu will need to try  and give me a little more explanation.

Cd&
0
 
seanpowellCommented:
I "think" the issue is that the span.input element is more than one line "high", and so the bottom border of the span.label element does not line up with it.

If that's the case, there's no way around it without some overly complex js to resize the elements to give them the same rendered box height. You may want to rething the approach, and remove the border from the label.

Sean
0
 
cwcroganCommented:
Wait a minute - I may be wrong here, but isn't this the exact place you SHOULD use a table? Isn't it tabular data? Tables aren't evil - only when they're used for layout...
0
 
COBOLdinosaurCommented:
cwcrogan,

A valid point.  It may be that this is a spot for a table.  The structure presented is a single rowm, but if that is a single instance of a tabular set; you are quite right, an we should be encouraging the use of a table.  Please not that in my earlier post I asked for additional information; which has not been forthcoming.  I think if after 3 days mikekwok is not interest enough in the problem to respond then ther is no point in us putting any additional effort in to finding a solution.

Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.