I am struggling with a layout issue involving a list of items containing images and blockquotes. My goal is to set a maximum width for the images and have the blockquotes automatically adjust their size to fit next to the images, all while keeping both elements vertically centered.
If anyone could provide assistance, I would greatly appreciate it. Here is a link to the jsFiddle.
Sample HTML Code:
<ul>
<li>
<div><img src="http://placehold.it/180x100"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
<li>
<div><img src="http://placehold.it/146x16"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
</ul>
CSS Styles:
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
width: 100%;
position: relative;
float: left;
padding: 0 0 30px;
}
ul li div {
width: 200px;
position: relative;
float: left;
height: 100%;
max-height: 100%;
display:table-cell;
vertical-align: middle;
}
ul li img {
display:table-cell;
vertical-align: middle;
}
ul li blockquote {
color: #999;
float: right;
font-style: italic;
margin: 0;
width: 70%;
}
ul li blockquote p {
margin: 10px 0;
}