CSS positioning problem

programming
1

I have no clue why this isn’t working as I expected.
I hope somebody can help me with this.

I’m trying to make this layout:

I have the following in my CSS:


body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	margin: 0px;
}
.contentarea {
	position: absolute;
	height: 100%;
	width: 50%;
	left: 25%;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: dashed;
	border-left-style: dashed;
}
.date {
	position: relative;
	left: 0px;
	top: 0px;
	margin: 0px;
	width: 100px;
	height: 20px;
	border: 1px solid;
}
.image {
	position: relative;
	left: 0px;
	top: 0px;
	height: 100px;
	margin: 0px;
	border: 1px solid;
	width: 100px;
}
.description {
	position: relative;
	left: 100px;
	top: 0px;
	width: 70%;
	margin: 0px;
	border: 1px solid;
}

and my HTML:


<div class="contentarea">

<div>
	<div class="date">Sept. 23, 2003</div>
	<div class="image"><img src="images/coastline_thumb.jpg"></div>
	<div class="description">Description: <br> Description goes here...	</div>
</div>

<div>
	<div class="date">Sept. 23, 2003</div>
	<div class="image"><img src="images/coastline_thumb.jpg"></div>
	<div class="description">Description: <br> Description goes here...	</div>
</div>

</div>

I also tried to use top: -100px for the ‘description’ box. This way I can actually line it up with the ‘image’ box, but then still the second set of boxes is pushed downwards (as if the ‘description’ box of the previous set was in between.

And I tried to do it using absolute positioning, but no luck thusfar.

Could anybody please shed a light on this confusing stuff? ('cause I’m getting very frustrated with this)

Thanks a lot.