Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 22477
  • Last Modified:

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 ?
0
mikekwok
Asked:
mikekwok
  • 2
1 Solution
 
COBOLdinosaurCommented:
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now