CSS - items not staying inline within div - html

Question

I'm trying to get 2 items to display inline-block within a div but nothing I've tried is working.
The html I've used is
<div class="quotation">
<ul>
<li><img src="images/quotes.png" alt="" class="quotemarks"></li>
<li><p class="words">All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p></li>
</ul>
</div>
Whilst my CSS at the moment is as follows:
.quotation {
position: absolute;
margin: 20% 5% 10% 5%;
width: 88.2%;
max-height: 100px;
padding: 0.5%;
background-color: red;
color: #bdc3c7;
}
.quotation ul li {
position: relative;
display: inline-block;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
font-weight: 100;
}
.quotemarks {
max-width: 20%;
}
.words {
width: 60%;
}
I cannot understand why .quotemarks and .words won't a) stay within .quotation and b) won't render inline.

Answer 1

You have quite some things wrong in your code and understanding of how css layout works.
You tell your list items to be display: inline-block. This tells them to be just as wide as their content.
You tell the content of your list items - the img and the paragraph - to have their width based on % - which refers to % of the width of the parent element - which happens to be the list item.
So basically the list item asks its content "How wide am I needed to be?" - while the content asks the parent list item "How wide are you? I'll be xy % of that."
It's easy to see that each element needs an answer before it can give one, creating an infinite loop of unanswered questions.
Apart from that, as soon as there is any whitespace (even a linebreak only) between two or more inline-block elements whose summed up width is 100% will make (at least) the last element wrap to a new line.
How to solve the inline-block whitespace issue: Either make your list-items float: left; (which has its own pitfalls!) or set font-size: 0; on the parent element (in this case the ul) , and re-set it on children as needed.
Also, put the width-controlling classes on the list items.
.quotation {
position: absolute;
margin: 20% 5% 10% 5%;
width: 88.2%;
max-height: 100px;
padding: 0.5%;
background-color: red;
color: #bdc3c7;
}
.quotation ul {
/*set this to avoid linebreak due to whitespace */
font-size: 0;
}
.quotation ul li {
display: inline-block;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
/* re-set font-size here to what you need */
font-size: 14px;
font-weight: 100;
vertical-align: text-top;
}
.quotemarks {
max-width: 20%;
}
.words {
width: 60%;
}
.quotemarks img {
max-width: 100%;
}
<div class="quotation">
<ul>
<li class="quotemarks">
<img src="http://placekitten.com/g/200/300" alt="" />
</li>
<li class="words">
<p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p>
</li>
</ul>
</div>

Answer 2

Move your classes .quotemark and words to parent elements
<div class="quotation">
<ul>
<li class="quotemarks"><img src="images/quotes.png" alt=""></li>
<li class="words"><p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p></li>
</ul>
</div>
Make sure that you added necessary vertical-align rule (top, middle or bottom... ) to your list items.
Check out demo
I hope this will help.

Answer 3

Thanks guys, your solutions worked and, whilst my CSS is still ugly as sin, everything fits in the box and I was able to change the size of the quotemarks too.
<div class="quotation">
<ul>
<li class="quotemarks"><img src="images/quotes.png" alt=""></li>
<li class="words"><p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day</p></li>
</div>
And the CSS
.quotation {
position: absolute;
margin: 20% 5% 200px 5%;
width: 88.2%;
max-height: 100px;
padding: 0.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
.quotation ul li {
position: relative;
display: inline-block;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
font-weight: 100;
vertical-align: middle;
}
.quotemarks {
max-width: 20%;
margin: 0 10px 0 0;
}
.quotemarks img {
height: 40px;
}
.words {
width: 80%;
line-height: 15px;
font-size: 20px;
}