How to create a list style for an article - html

Question

I'm trying to split an article into a list format such that it shows the title, the image, and then description. Let's say I have an article title: 3 Ways to Make Money, then I have the article in a list, like so:
(sub-title) 3. Sleep All Day (then an image, followed by a little description),
(sub-title) 2. Eat Well (then an image, followed by a little description) and
(sub-title) 1. Watch TV (then an image, followed by a little description)... such that users will click on the next or previous button to see the next or previous list respectively. See sample image for better understanding
So far, I've been able to come up with this:
.logg-list {
overflow: hidden;
margin-top: 5px;
float: left;
width: 619px;
}
.logg-list-controls {width: 100%;
top: 1px;
z-index: 2;
cursor: pointer;
margin-bottom: 5px;
}
a.logg-list-nav-left {
float: left;
background-color: #042a54;
color: #fff;
font-size: 14px;
line-height: 38px;
width: 88px;
height: 40px;
font-style: normal;
font-weight: 400;
text-align: center;
text-decoration: none;
}
a.logg-list-nav-right {
float: right;
background-color: #042a54;
color: #fff;
font-size: 14px;
line-height: 38px;
width: 88px;
overflow: hidden;
font-style: normal;
font-weight: 400;
text-align: center;
text-decoration: none;
}
.logg-list-content {
width: 6190px;
max-height: 600px;
overflow: hidden;
}
.list-number-title {
position: relative;
top: -30px;
text-align: center;
width: 100%;
display: inline-block;
overflow: hidden;
}
.list-item-title {
display: inline-block;
font-weight: 700;
font-size: 22px;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
}
.list-image {
width: 619px;
height: 400px;
overflow: hidden;
}
.list-description {
margin-top: 22px;
display: block;
overflow: hidden;
width: 619px;
height: auto;
float: left;
}
<div class="logg-list">
<div class="logg-list-controls">
<a class="logg-list-nav-left" href="#" style="cursor: pointer;">
<i class="fa fa-caret-left"></i> Prev
</a>
<a class="logg-list-nav-right" href="#" style="cursor: pointer;">
Next <i class="fa fa-caret-right"></i>
</a>
</div>
<div class="logg-list-content pull-left">
<div class="list-number-title">
<h2 class="list-item-title">10. Longer Title made from long poster</h2>
</div>
<div class="list-image">
<img src="http://placehold.it/619x400.png?text=no+image" alt="Default Image" itemprop="image">
</div>
<div class="list-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.
<p>Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>
<p>In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
</div>
<!-- Another List Here -->
<div class="list-number-title">
<h2 class="list-item-title">9. He belongs to you.</h2>
</div>
<div class="list-image">
<img src="http://placehold.it/619x400.png?text=no+image" alt="Default Image" itemprop="image">
</div>
<div class="list-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.
<p>Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>
<p>In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
</div>
</div>
</div>
Here's my challenge now....
The subtitles are not displaying.
Some descriptions may be long, and if I remove the max-height value in the .list-description, the next image shows up.

Answer 1

I would remove the top positioning on .list-number-title, that will show your titles. Also, I'd remove the width being set as 6190px on .logg-list-content. Set it to 100% and the example shows correctly.
Regards the max height - if you want to limit the size of the description this should be set on .list-description and not .logg-list-content. A better way of doing that would be to limit the description to a certain number of characters, rather than forcing a max height.
.logg-list {
overflow: hidden;
margin-top: 5px;
float: left;
width: 619px;
}
.logg-list-controls {width: 100%;
top: 1px;
z-index: 2;
cursor: pointer;
margin-bottom: 5px;
}
a.logg-list-nav-left {
float: left;
background-color: #042a54;
color: #fff;
font-size: 14px;
line-height: 38px;
width: 88px;
height: 40px;
font-style: normal;
font-weight: 400;
text-align: center;
text-decoration: none;
}
a.logg-list-nav-right {
float: right;
background-color: #042a54;
color: #fff;
font-size: 14px;
line-height: 38px;
width: 88px;
overflow: hidden;
font-style: normal;
font-weight: 400;
text-align: center;
text-decoration: none;
}
.logg-list-content {
width: 100%;
overflow: hidden;
}
.list-number-title {
position: relative;
text-align: center;
width: 100%;
display: inline-block;
overflow: hidden;
}
.list-item-title {
display: inline-block;
font-weight: 700;
font-size: 22px;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
}
.list-image {
width: 619px;
height: 400px;
overflow: hidden;
}
.list-description {
margin-top: 22px;
display: block;
overflow: hidden;
width: 619px;
max-height: 100px;
float: left;
}
<div class="logg-list">
<div class="logg-list-controls">
<a class="logg-list-nav-left" href="#" style="cursor: pointer;">
<i class="fa fa-caret-left"></i> Prev
</a>
<a class="logg-list-nav-right" href="#" style="cursor: pointer;">
Next <i class="fa fa-caret-right"></i>
</a>
</div>
<div class="logg-list-content pull-left">
<div class="list-number-title">
<h2 class="list-item-title">10. Longer Title made from long poster</h2>
</div>
<div class="list-image">
<img src="http://placehold.it/619x400.png?text=no+image" alt="Default Image" itemprop="image">
</div>
<div class="list-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.
<p>Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>
<p>In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
</div>
<!-- Another List Here -->
<div class="list-number-title">
<h2 class="list-item-title">9. He belongs to you.</h2>
</div>
<div class="list-image">
<img src="http://placehold.it/619x400.png?text=no+image" alt="Default Image" itemprop="image">
</div>
<div class="list-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.
<p>Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>
<p>In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
</div>
</div>
</div>