tricky item for experts

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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
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
.label {padding:5px; width:250px; border:solid 1px #f00;}
.rule { width:36px; display:table-cell; vertical-align:middle;}

<table border="1">
    <div class="rule"><hr></div>
    <div class="label">item2</div>
    <div class="rule"><hr></div>
    <div class="blank"></div>
    <td class="pic">image</td>

Re: tricky item for experts

Quoted text here. Click to load it


Just a suggestion...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


.label { padding: 5px; width: 250px; border: solid 1px #f00; }
.pic { width: 75px; }
.rule { valign: middle; width:36px; }
hr {color: #f00; }

<table border="1">

<table cellspacing="0" cellpadding="0" border="0">
<td class="rule"><hr></td>
<td class="label">item2<br>item2a<br>item2b</td>
<td class="rule"><hr></td>

item 3
<td class="pic">image</td>


Hope this helps


Site Timeline