Check out my demo here: http://jsfiddle.net/3c40tafe/1/
Is there a way to align the icon, file name, and description in a single row? The icon and title should have fixed widths, while the description paragraph should take up the remaining width.
Here's my current code:
<div class="item_row">
<div class="result_item_icon"><img src="img/logo/xmas_kitten.png"></div>
<div class="result_item_name">12 Kittens of Xmas</div>
<div class="search_result_description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
CSS:
.result_item_icon{
display:block;
float:left;
width:50px;
height:100%;
text-align: center;
}
.result_item_icon img{
max-width:50px;
max-height:50px;
}
.result_item_name{
display:block;
height:50px;
width:200px;
font-weight:700;
vertical-align: middle;
float:left;
}
.search_result_description{
display:block;
float:left;
}