Here is the HTML:

<div class="timeslot">
	<span>2009</span>
	<p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit.
	</p>
	</div>
	<div class="timeslot even">
	<span>2008</span>
	<p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit.
	</p>
</div>

And here is the CSS:

The default timeslot will float left and have a 100-pixel padding to the right. This leaves room for the year (<span>) to sit to its right. I also used absolute positioning for the year so that I could easily switch from left to right without worrying about colliding float issues.

Add a class of even to each even row, so that we get it right-aligned in red and the year positioned to the left.

.timeslot {
	width: 235px;
	float: left;
	margin: 0 0 10px;
	padding: 10px 100px 0 0;
	border-top: 3px solid #ddd;
	position: relative;
}
.timeslot span {
	position: absolute;
	right: 0;
	top: 27px;
	font-size: 3em;
	color: #999;
}
.even {
	float: right;
	padding: 10px 0 0 100px;
	border-color: #ca0000;
}
.even span {
	left: 0;
	color: #ca0000;
}

2. Custom Page Styling, CSS Drop Caps and Footnotes

One website that is truly unique is href="http://jasonsantamaria.com/articles/mathematics-of-the-tootsie-pop/">Jason Santa Maria’s. What’s impressive about Jason’s website is that each article and blog post is entirely unique, with its design tailored to the content. Looking at a recent article, “ href="http://jasonsantamaria.com/articles/mathematics-of-the-tootsie-pop/">Mathematics of the Tootsie Pop,” we’ll go over a few techniques that stand out for us.

href="http://jasonsantamaria.com/articles/mathematics-of-the-tootsie-pop/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/article_1_a.gif" alt="Article 1 A in 5 Useful Coding Solutions For Designers And Developers" />

1. Custom Page Styling in WordPress

The first question that came to mind when visiting Jason’s blog was, “How did he give each post a unique design?” You can achieve this simply by referencing a custom style sheet to override the website’s default style. By using a combination of href="http://codex.wordpress.org/Custom_Fields">custom fields in WordPress and understanding href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">CSS specificity, you can freely give each post a design of its own. So, how is this done?

Step 1. Customize post with custom style sheet />Start by creating a new style sheet, and name the file to match your post’s title. With a good understanding of href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">CSS specificity, you can customize the look and feel of the post.

Step 2. Create custom field values />Log in to your WordPress admin area, and go to the edit page for the post. Scroll down to the “Custom Field” area, and enter a new custom field name called “customStyles”. Then, for the value of that custom field, enter the full URL of your custom style sheet.

<?php $customStyles = get_post_meta($post->ID, "customStyles", true);
if (!empty($customStyles)) { ?>
<link rel="stylesheet" href="<?php echo $customStyles; ?>" type="text/css" media="screen" />
<?php } ?>

	<p><span class="dropCap">E</span>ros decet bis eligo jumentum brevitas vel abigo iusto commoveo ex abigo, euismod ulciscor. Bene enim vulputate enim, nisl illum patria. Enim te, verto euismod in nisl lucidus. Capio incassum quadrum nunc ex proprius praesent et quod. Autem in commoveo similis nostrud turpis paulatim quadrum, tristique. </p>

.dropCap {
	float: left;
	font-size: 5em;
	line-height: 0.9em;
	padding: 0 5px 0 0;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.dropCap {
	text-indent: -99999px;
	background: url(drop_cap_e.gif) no-repeat left 5px;
	height: 50px; width: 55px;
	float: left;
	display: block;
}

<p class="small"
	style=" position: relative;top: 260px;width: 430px;left: 290px;">
		<strong>At its core, it is the "artful" hemisphere.</strong> Abstract thinking, intonation
		and rhythm of language, artistic ability, and the perception of joy from music are centered here.
		The right hemisphere specializes in thinking about big picture ideas and overarching themes holistically
		instead of linearly.
</p>

.textflow {
	font-size: 1.2em;
	color: #2d2d2d;
	margin: 20px 0;
	padding: 5px 0;
	position: relative;
}

<div class="textflow" style="width:300px; left: 680px;">
  <p>Ad, natu virtus, ut ea, tristique aptent illum iustum abigo ad vulputate gravis melior quae.</p>
</div>

<span class="the_score">8</span>
<img class="ten" src="http://web.appstorm.net/wp-content/themes/appstorm_v2/images/ten.gif" alt="">

.tabdiv .the_score {
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	font-size: 110px;
	line-height: 110px;
	font-weight: bold;
	position: absolute;
	top: 30px;
	right: 100px;
	color: #262626;
	text-align: center;
	letter-spacing: -17px;
}
.tabdiv .ten {
	position: absolute;
	top: 80px;
	right: 45px;
}

<div class="ratingblock">
	<span class="rating">8</span>
	<span class="max">10</span>
</div>

.ratingblock{
	position: relative;
	height: 100px;
}
.ratingblock .rating {
	font-size: 8em;
	padding: 0 5px;
}
.ratingblock .max{
	display: block;
	background: url(rating_bg.gif) no-repeat;
	position: absolute;
	top: 0; left: 0;
	font-size: 5em;
	width: 50px;
	height: 60px;
	padding: 40px 0 0 50px;
}