Hello and thank you for taking the time to read about my problem.
I’m building a resume style.
So far I’ve used <DL>‘s and managed to style them so that they line up opposite each other, fine.
(e.g.: )
+--<DL>--------------------------------------------------------------------+
| |
| +-<dt>---------------+ +-<dd>------------------------------------------+ |
| | Position: | | {Job role #1 ... } | |
| +--------------------+ | {Job role #2 ... } | |
| | {Job role #3 ... } | |
| +-----------------------------------------------+ |
+--------------------------------------------------------------------------+
+--<DL>--------------------------------------------------------------------+
| |
| +-<dt>---------------+ +-<dd>------------------------------------------+ |
| | Company: | | {company name} | |
| +--------------------+ +-----------------------------------------------+ |
| |
+--------------------------------------------------------------------------+
etc...
However, what I’d like to do now, is be able to list individual job roles that might have been held within the same company, and with the length of time in each role, right-aligned.
Trying to right-align text within an already existing <dd> by spans or divs seemed to be difficult. So it seemed to make sense to just use another <dl>, nested within the <dd>. This also keeps to the semantical organisation of the current document.
So using the same visual model as above, it’d now look like:
+--<DL>--------------------------------------------------------------------+
| |
| +-<dt>---------------+ +-<dd>-------------------------------------------+|
| | Positions: | |+-<DL>-----------------------------------------+||
| +--------------------+ ||+-<dt>--------------------------+ +<dd>-----+|||
| |||{Job role 1 ... } | | {#yrs}||||
| ||+-------------------------------+ +---------+|||
| |+----------------------------------------------+||
| |+-<DL>-----------------------------------------+||
| ||+-<dt>--------------------------+ +<dd>-----+|||
| |||{Job role 2 ... } | | {#yrs}||||
| ||+-------------------------------+ +---------+|||
| |+----------------------------------------------+||
| |+-<DL>-----------------------------------------+||
| ||+-<dt>--------------------------+ +<dd>-----+|||
| |||{Job role 3 ... } | | {#yrs}||||
| ||+-------------------------------+ +---------+|||
| |+----------------------------------------------+||
| +------------------------------------------------+|
+--------------------------------------------------------------------------+
^
|
+-- [all content on second-level items/lists should start flush
left with the previous border / 1st-level <dd> container]
+--<DL>--------------------------------------------------------------------+
| |
| +-<dt>---------------+ +-<dd>------------------------------------------+ |
| | Company: | | {company name} | |
| +--------------------+ +-----------------------------------------------+ |
| |
+--------------------------------------------------------------------------+
etc...
However, I’ve not been able to style this <dd>—> <DL><dt><dd> anywhere near like how the first levels have worked out. So I’m requesting assistance from any expert CSS-ers, here.
Whilst I’d consider myself competant with HTML and CSS, I think there are big gaps in my knowledge with regards the box-model and floats. (Both of which come into play here)
So any help would be appreciated, thank you!
(see next post for test code)