Using Inline-Block instead of Float for Gallery Layout - html

Question

I have a gallery with image, title and description.
The image uses float: left; while the title and description stack to the right of it.
https://jsfiddle.net/aeuz0n8g/
I'm looking for a way to use display: inline-block; on the image instead of float, but the description will not stack under the title.
https://jsfiddle.net/5jbswg39/
.item-container {
display: inline-block;
width: 300px;
min-height: 90px;
margin: 0.2em;
padding: 0.5em;
vertical-align: top;
text-align: left;
background: white;
}
.img-wrapper {
float: left;
max-width: 50px;
max-height: 60px;
height: 60px;
margin: 0.6em 1em 0 0;
text-align: center;
background: gray;
}
.img-wrapper img {
width: auto;
max-width: 50px;
max-height: 50px;
vertical-align: top;
}
.title {
max-width: 275px;
font-size: 1.05em;
font-weight: 700;
padding: 0.3em 0;
text-align: left;
vertical-align: top;
}
.description {
max-width: 275px;
font-size: .9em;
line-height: 1.4em;
text-align: left;
vertical-align: top;
}
<div class="item-container">
<div class="img-wrapper">
<a href="#">
<img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
</a>
</div>
<div class="title">
Title
</div>
<div class="description">
Description description description description description description.
</div>
</div>
Note: this is an explanation of why I'm looking to use inline-block instead of float.
For an unknown reason, when using my full site in Chrome, on 720p resolution, the Title will overlap the Image. But not in Firefox, IE or 1080p.
I'm only able to show a screenshot, since it's a local site being developed on my computer. But the JSFiddle link is the exact code being used. Though I cannot replicate the overlap in JSFiddle.
I cannot debug the problem, because when I inspect element and touch any of the css, the titles reset back to normal, no longer overlapping. So I thought I would try alternative css to achieve the same layout and see if it removes the problem. I thought it might be a float rendering glitch with chrome.

Answer 1

Wrap the title and text in a new element, set that to inline-block and contain it's width so it will fit on the same row.
.info {
width: calc(100% - (50px + 1em));
display: inline-block;
vertical-align: top;
}
Here's a demo.
.item-container {
display: inline-block;
width: 300px;
min-height: 90px;
margin: 0.2em;
padding: 0.5em;
vertical-align: top;
text-align: left;
background: white;
}
.img-wrapper {
display: inline-block;
max-width: 50px;
max-height: 60px;
height: 60px;
margin: 0.6em 1em 0 0;
text-align: center;
background: gray;
}
.img-wrapper img {
width: auto;
max-width: 50px;
max-height: 50px;
vertical-align: top;
}
.title {
display: inline-block;
max-width: 275px;
font-size: 1.05em;
font-weight: 700;
padding: 0.3em 0;
text-align: left;
vertical-align: top;
}
.description {
display: inline-block;
max-width: 275px;
font-size: .9em;
line-height: 1.4em;
text-align: left;
vertical-align: top;
}
/* added this */
.info {
width: calc(100% - (50px + 1em));
display: inline-block;
vertical-align: top;
}
<!-- Item 1 -->
<div class="item-container">
<div class="img-wrapper">
<a href="#">
<img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
</a>
</div><!--
--><div class="info">
<div class="title">
Title
</div>
<div class="description">
Description description description description description description.
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item-container">
<div class="img-wrapper">
<a href="#">
<img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
</a>
</div><!--
--><div class="info">
<div class="title">
Title
</div>
<div class="description">
Description description description description description description.
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item-container">
<div class="img-wrapper">
<a href="#">
<img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
</a>
</div><!--
--><div class="info">
<div class="title">
Title
</div>
<div class="description">
Description description description description description description.
</div>
</div>
</div>
You could also make this a flex layout with the default flex-direction: row between the left/right sections, and a flex-direction: column for the title/text.
.item-container {
display: inline-flex;
width: 300px;
min-height: 90px;
margin: 0.2em;
padding: 0.5em;
vertical-align: top;
text-align: left;
background: white;
}
.img-wrapper {
max-width: 50px;
max-height: 60px;
height: 60px;
margin: 0.6em 1em 0 0;
text-align: center;
background: gray;
}
.img-wrapper img {
width: auto;
max-width: 50px;
max-height: 50px;
vertical-align: top;
}
.title {
font-size: 1.05em;
font-weight: 700;
padding: 0.3em 0;
text-align: left;
}
.description {
max-width: 275px;
font-size: .9em;
line-height: 1.4em;
text-align: left;
}
.info {
flex-grow: 1;
display: flex;
flex-direction: column;
}
<!-- Item 1 -->
<div class="item-container">
<div class="img-wrapper">
<a href="#">
<img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
</a>
</div><!--
--><div class="info">
<div class="title">
Title
</div>
<div class="description">
Description description description description description description.
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item-container">
<div class="img-wrapper">
<a href="#">
<img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
</a>
</div><!--
--><div class="info">
<div class="title">
Title
</div>
<div class="description">
Description description description description description description.
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item-container">
<div class="img-wrapper">
<a href="#">
<img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
</a>
</div><!--
--><div class="info">
<div class="title">
Title
</div>
<div class="description">
Description description description description description description.
</div>
</div>
</div>

Answer 2

If you're open to using display: flex you could wrap the title and description in a div and do this.
<div class="item-container">
<div class="img-wrapper">
<a href="#">
<img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
</a>
</div>
<div class="content-wrapper">
<div class="title">
Title
</div>
<div class="description">
Description description description description description description.
</div>
</div>
</div>
and then
.item-container {
display: flex;
width: 300px;
min-height: 90px;
margin: 0.2em;
padding: 0.5em;
vertical-align: top;
text-align: left;
background: white;
}
You can optionally add display: flex to the content-wrapper class as well like this
.content-wrapper {
display: flex;
flex-direction: column;
}
FWIW I tested this on my MBP with the resolution changed and nothing overlapped for me.