Is it possible to use div tags, using relative positioning, to have two columns so that the top line of two blocks line up?
I'm coding an online version of a c.v. Using a table scheme, I could achieve this with coding a row like this:
<tr valign="top">
<td width="85%">
<p class="c5">
Job Title
</p>
<p class="c4">
Company and City
</p>
<p class="c4">
Job Description and other details
</p>
</td>
<td width="15%" nowrap="nowrap">
<p class="yrs">
Dates there
</p>
<p class="c4">
<br />
</p>
</td>
</tr>
This would display the time served at a company in a new column, lining up with the top line of the first column.
In CSS I have the following code:
<div style="position: relative; background-color: blue;
left: 0px; top: 0px; width: 80%; height: automatic; z-index: 4">
<p class="c5">
Company
</p>
<p class="c4">
Job Title
</p>
<p class="c4">
Description.
(This can be quite long and
is a key factor for making
the height automatic since
</p>
</div>
<div style="position: relative; background-color: blue;
left: 0px; top: 5px; width: 20%; margin-left: 80%;
height: automatic; z-index: 4">
<p class="yrs">
yyyy - yyyy
</p>
</div>
The desired result is 67% of what I want. The years display one line below the information provided in the description instead of at the top, but to the right where I want it.
I don't think positioning with absolutes is viable because the height of the blocks for describing a job will vary on the left. As well, there is text above this area that would make coding absolutes very difficult to achieve.
