CSS positioning problem

[Flashmatazz]

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:

http://www.twc.sshunet.nl/~swmvanbo/arjen/layout.gif

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.

[abzoid]

The thing you must remember about CSS relative positioning, is that it is relative to where it would be if no CSS were used, not relative to a specific element or x,y point on the page.

[Flashmatazz]

Thanks.

However, I also tried something with absolute positioning but no success either.

Here's what I have:



body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin: 0px;
overflow: hidden;
}
.contentarea {
position: absolute;
height: 100%;
width: 50%;
left: 25%;
}
.entry {
position: relative;
width: 100%;
height: 140px;
border-bottom-width: 1px;
border-bottom-style: dashed;

}
.date {
position: absolute;
left: 0px;
top: 10px;
margin: 0px;
width: 100px;
height: 20px;
}
.image {
position: absolute;
left: 0px;
top: 30px;
height: 100px;
margin: 0px;
border: 1px solid;
width: 100px;
}
.description {
position: absolute;
left: 110px;
top: 30px;
width: 80%;
margin: 0px;
overflow: auto;
height: 100px;
}

and the HTML"


<div class="contentarea">

<div class="entry">
<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 class="entry">
<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>


It's better than what I had before, but still not exactly what I want.
When the 'description' box contains more text than the 100px height, it now gets a scrollbar.
However, what I would like is that this box is sized according to its content, thereby pushing the next 'entry' downwards.

I hope I'm making myself clear...

Any suggestions?

[abzoid]

I understand what you're trying to do, but not sure why you're doing your layout strictly with CSS and not using tables?

[Flashmatazz]

Well, for one I just wanted to learn more about CSS.

And I also thought it was better to do it using CSS, 'cause of the separation between structure and the way it looks.

Anyways, I can't figure out how to do it properly with CSS, so maybe I'll indeed turn back to using tables. :(