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">
AAAAAAAAAAAAAAAAAAAAAAAAAA
<span class="label">Customer Name:</span>
<span class="input">
BBBBBBBBBBBBBBBBBBBBBBBBBB
</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 ?
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">
AAAAAAAAAAAAAAAAAAAAAAAAAA
<span class="label">Customer Name:</span>
<span class="input">
BBBBBBBBBBBBBBBBBBBBBBBBBB
</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 ?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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...
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&
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&
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