Multiple divs in absolute - css

Question

I reached to a problem in my website.
My website is showing all the records in she same page, that each record calls the main div called "work" and inside of that one is calling another one called "worktitle".
I want the worktitle div stays like the image:
Image
But the problem is on the second row. The divs that belongs to the seconda row are in the same place as the first row.
Like you can see here:
Website
HTML Code
<div id="box1">
<?php do { ?>
<div id="work">
<a href="<?php echo $row_works['url']; ?>" target="new">
<img src="images/<?php echo $row_works['image']; ?>" />
<div class="worktitle">
<span class="infotec"><?php echo $row_works['infotec']; ?><br/>
<?php if ((isset($_GET['lang'])) && ($_GET['lang']=="en")) {
echo $row_works['descriptionen']; }
else {
echo $row_works['descriptionpt'];
} ?>
</span>
<span class="title"><?php echo $row_works['title']; ?></span>
</div>
</a>
</div>
<?php } while ($row_works = mysql_fetch_assoc($works)); ?>
</div>
CSS Code
#work {
float: left;
margin: 0px;
padding: 0px;
width : 200px;
border: solid 1px #787879;
}
#work a{
color: #FFF;
text-decoration:none;
}
#work a:hover {
opacity: 0.5;
}
#work img {
margin: 0px;
width: 200px;
z-index: 9;
}
a img{
border: 0;
}
.worktitle {
position: absolute;
top: 200px;
background-color: #787879;
opacity: 0.6;
font-weight: bold;
font-size: 14px;
z-index: 10;
}
.infotec {
font-weight: normal;
font-size:9px;
}
.title {
text-align: right;
}
What am i doing wrong? Please help me out.

Answer 1

First of all id's must be unique in your html so change #work to .work then try giving it a relative position and aligning your description to the bottom.
.work{
position: relative;
}
.worktitle {
position: absolute;
bottom: 0;
}