R
richard
The problem sounds simple enough.
A 3 column flexible layout.
Column 1 is a row counter. Column 3 has an image.
The problem is in colum 2.
A minimum of four lines of text.
With each text line having an unknown length of content.
75% of column 2 will consist of an inner box.Highlighted with a border.
From the center of the borders on either side will extend a horizontal
rule.
That part is not a problem. Except I can't get the horizontal rule
precisely in the middle as desired.
The tricky part, comes when the center box has more than two text lines.
Thusly, the horizontal rule must also change its position to align with the
center box.
Below is the code and css I've got so far.
You want a url? What? YOu don't know how to do copy and paste?
..rule, .label {float:left;}
..blank {clear:left;}
..label {padding:5px; width:250px; border:solid 1px #f00;}
..pic {75px;}
..rule { width:36px; display:table-cell; vertical-align:middle;}
hr {color:#f00;}
<table border="1">
<tr>
<td>1</td>
<td>item1
<div>
<div class="rule"><hr></div>
<div class="label">item2</div>
<div class="rule"><hr></div>
<div class="blank"></div>
</div>
item3
</td>
<td class="pic">image</td>
</tr>
</table>
A 3 column flexible layout.
Column 1 is a row counter. Column 3 has an image.
The problem is in colum 2.
A minimum of four lines of text.
With each text line having an unknown length of content.
75% of column 2 will consist of an inner box.Highlighted with a border.
From the center of the borders on either side will extend a horizontal
rule.
That part is not a problem. Except I can't get the horizontal rule
precisely in the middle as desired.
The tricky part, comes when the center box has more than two text lines.
Thusly, the horizontal rule must also change its position to align with the
center box.
Below is the code and css I've got so far.
You want a url? What? YOu don't know how to do copy and paste?
..rule, .label {float:left;}
..blank {clear:left;}
..label {padding:5px; width:250px; border:solid 1px #f00;}
..pic {75px;}
..rule { width:36px; display:table-cell; vertical-align:middle;}
hr {color:#f00;}
<table border="1">
<tr>
<td>1</td>
<td>item1
<div>
<div class="rule"><hr></div>
<div class="label">item2</div>
<div class="rule"><hr></div>
<div class="blank"></div>
</div>
item3
</td>
<td class="pic">image</td>
</tr>
</table>