I created a website and there is a list of item which displayed like this:
<?php foreach($category->getHighlightedProject() as $project):?>
<div class="portfolio-project">
<?php
$photo = $project->getTopMostPhoto($project->project_id);
if ($photo):
?>
<img src="<?php echo Yii::app()->baseUrl."/".Yii::app()->params['uploadPath']."/".Yii::app()->params['project']['uploadPath']."/".$photo->getPhotoNameWithSize($photo->project_photo_image_file_name, ProjectPhoto::SIZE_MEDIUM);?>" alt="<?php echo $project->project_name;?>"/>
<div class="portfolio-desc">
<div class="portfolio-desc-title"><?php echo $project->project_name;?></div>
<div class="portfolio-desc-short-desc"><?php echo $project->project_short_desc;?></div>
</div>
<?php endif;?>
</div>
<?php endforeach;?>
If an item is hovered, .portfolio-desc will pop up, but still inside .portfolio-project.
Here is the css:
.portfolio-highlight {margin-top: 30px; text-align: center;}
.portfolio-item {width: 25%; float: left;}
.portfolio-category {margin-bottom: 30px;}
.portfolio-category a{font-size: 16px; font-family: 'ralewaybold';}
.portfolio-project {height: auto; position: relative; overflow:auto;}
.portfolio-project img {max-width: 100%;}
.portfolio-desc {display: none; width: 90%; height: 80px; position: absolute; bottom: 0; background: url('../img/portfolio-desc-bg.png') repeat 0 0; color: #FFF; padding: 5%; line-height: 2.0em;}
.portfolio-desc-title {font-size: 16px; font-family: 'ralewayextrabold';}
.portfolio-desc-short-desc {font-size: 13px;}
The problem is, .portfolio-project doesn't seem to fit width the content's height. Noticed there is a white line below the first line of items. They are extra spaces of .portfolio-project.
What did I do wrong? I've been looking for solutions for days and still haven't found a clue. Can anybody help? Sorry for my bad english.
