3 replies [Last post]
MGweb63
MGweb63's picture
Offline
newbie
Last seen: 9 years 15 weeks ago
Timezone: GMT-4
Joined: 2011-08-05
Posts: 6
Points: 9

What is the suggested CSS method for aligning columns, in this case specifically a date followed by text (like in a resume)

2011  I did this.
2010  I did that.
2009  I didn not do anything.

Also accommodating for a more text in the first column (like a date range: 2009 - 2010).

Right now I am just using multiple  's which leads to misalignment and is, I imagine, not advisable.

Thank you.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CV structure, hmmm

I haven't given publishing this type of document as html a lot of thought, so expect some rambling.

First, if this is a CV/résumé, I'd think a PDF would be the better platform, as it has a fixed layout suitable for printing.

For html, there are two likely structures:

  • An associative array, or key/value pairs.
  • A table of two field records.

For example:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <!-- hack for bug in Web Developer addon for Firefox.  Used for
	 development and debugging only-->
    <link rel="stylesheet"
	  type="text/css" href="x" />
 
    <style type="text/css">
      /*<![CDATA[*/
 
p {
  margin: 1.25em 0;
  }
 
dl {
  border: 1px dotted gray;  
  width: 35em;
  }
 
dt {
  clear: left;
  float: left;
  margin: 1.25em 0;
  width: 4em;
  }
 
dd {
  overflow: hidden;
  padding: 1px;
  }
 
table {
  border: 1px dotted gray;  
  border-collapse: collapse;
  width: 35em;
  }
 
th {
  padding: 1.25em 0;
  text-align: left;
  width: 4em;
  vertical-align: top;
  }
 
/*]]>*/      
    </style>
  </head>
 
  <body>
    <dl>
      <dt>2011</dt>  
      <dd>
	<p>I did this.</p>
      </dd>
      <dt>2010</dt> 
      <dd>
	<p>Mauris bibendum viverra rhoncus. Mauris
	  feugiat aliquam mauris eu rhoncus? Duis faucibus nisl nulla. Nam
	  nec orci eget risus fermentum dictum nec sit amet ligula.</p>
      </dd>
      <dt>2009</dt> 
      <dd>
	<p>I didn not do anything.</p>
      </dd>
    </dl>
 
    <table>
      <tr>
	<th>2011</th>  
	<td>I did this.</td>
      </tr>
 
      <tr>
	<th>2010</th>  
	<td>
	  <p>Mauris bibendum viverra rhoncus. Mauris feugiat aliquam mauris eu
	    rhoncus? Duis faucibus nisl nulla. Nam nec orci eget risus
	    fermentum dictum nec sit amet ligula.</p>
	</td>
      </tr>
 
      <tr>
	<th>2009</th>  
	<td>
	  <p>I didn not do anything.</p></td>
      </tr>
    </table>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

MGweb63
MGweb63's picture
Offline
newbie
Last seen: 9 years 15 weeks ago
Timezone: GMT-4
Joined: 2011-08-05
Posts: 6
Points: 9

re: CV structure

Thank you for the reply. My question was posed in reference to a resume (which will be available as a .pdf as well), but I would think there are other cases where this kind of formatting would be needed or preferred.

I am familiar with the table options, but seeing as tables are anathema nowadays (even if they are dressed up with CSS) I thought there might be a more efficient, pure CSS approach. The 'dl' approach is interesting. I am surprised(?) there isn't a 'tab' type of tag.

Out of curiosity I am not familiar with this is about:

<!-- hack for bug in Web Developer addon for Firefox.  Used for
 development and debugging only-->
<link rel="stylesheet"
  type="text/css" href="x" />
 
<style type="text/css">

And you didn't ramble, so kudos. Wink

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

MGweb63 wrote:Thank you for

MGweb63 wrote:

Thank you for the reply. My question was posed in reference to a resume (which will be available as a .pdf as well), but I would think there are other cases where this kind of formatting would be needed or preferred.

Formatting is not a part of html, except as we'll discuss. HTML is a structural markup language. Its purpose is to tag elements for what they are semantically in the structure of the document. Formatting falls within the purview of css.

Quote:

I am familiar with the table options, but seeing as tables are anathema nowadays (even if they are dressed up with CSS) I thought there might be a more efficient, pure CSS approach. The 'dl' approach is interesting. I am surprised(?) there isn't a 'tab' type of tag.

There is no reason to eschew using a table when it's actually a table. What makes it evil is using the table markup for layout purposes. In this case, the driving force was layout/formatting, but the content actually is positionally related data; i.e. a table. If you were to alter the order of any given column or any given row, the relationships are broken.

Structurally, the content can also be taken as a hash list or key/value array. That is, a key, the year, and the value, what you did or didn't do that year. The container is a dl (definition list). Its elements are the dt (data term) and dd (data definition). It becomes obvious from some of the html element tags the the language was developed by physicists, for physicists.

Quote:

Out of curiosity I am not familiar with this is about:

<!-- hack for bug in Web Developer addon for Firefox.  Used for
 development and debugging only-->
<link rel="stylesheet"
  type="text/css" href="x" />
 
<style type="text/css">

There is an addon for Firefox called Web Developer. It is one of the must-have extensions for debugging and deconstructing html pages. The last upgrade introduced a bug that causes a hang-up when validating locally hosted css. This hack gets past the bug. The developer has fixed it, but it isn't yet approved by Mozilla. Chrome had the same issue with the addon, but Chrome's version is a bookmarklet and not subject to prior approval. So, don't carry it forward.

Quote:

And you didn't ramble, so kudos. Wink

Looking back, I did better than I expected to going in. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.