Несколько divs в абсолютном

Question

Я достиг проблемы на своем веб-сайте. На моем веб-сайте отображаются все записи на той же странице, что каждая запись вызывает главный div, называемый «работа», а внутри этого - другой, называемый «worktitle».

Я хочу ДИВ остается рабочим названием, как на картинке: Image

Но проблема находится на втором ряду. Дивы, принадлежащие второй строке, находятся в том же месте, что и первая строка. Как вы можете увидеть здесь: Website

HTML код

<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 код

#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; 
} 

Что я делаю неправильно? Пожалуйста, помогите мне.

Answer 1

Прежде всего, идентификатор должен быть уникальным в вашем html, поэтому измените #work на .work, затем попробуйте дать ему относительное положение и выровнять описание донизу.

.work{ 
    position: relative; 
} 
.worktitle { 
    position: absolute; 
    bottom: 0; 
}