ul li timetable elements overlapping - html

Question

Making a responsive timetable which switches to a list format for mobile, with Weekdays acting as headers and relevant sessions being listed below.
I've encountered a problem where li elements overlap. Despite experimenting with position and display values, I can't figure out how to counteract this overlap.
Any help would be appreciated.
.smallTableContainer {
position: relative;
display: none;
height: auto;
overflow: hidden;
}
.weekdayHeader {
background: #bc4b51;
color: #efefef;
font-size: 18pt;
padding: 10px 0px;
}
.sessions {
padding: 0;
}
.className {
float: left;
display: inline-block;
color: #1e1e1e;
font-size: 13pt;
padding-left: 10px;
}
.classTime {
float: right;
display: inline-block;
color: #1e1e1e;
font-size: 12pt;
padding-right: 10px;
}
<div class="smallTableContainer">
<h3 class="weekdayHeader">Monday</h3>
<ul class="sessions">
<li>
<div class="className">
Warrior Cubs Kickboxing
<br>AGES 5-7
<br>[ SPACES AVAILABLE ] </div>
<div class="classTime">
<br> 16.15pm - 17.00pm
</div>
</li>
<li>
<div class="className">
Warrior Cubs Kickboxing
<br>AGES 8-12
<br>[ SPACES AVAILABLE ]
</div>
<div class="classTime">
<br> 17.00pm - 17.45pm
</div>
</li>
</ul>
</div>

Answer 1

If I understand your desired result correctly, you want the events and times to disaply on individual lines. In order to do this, all you're looking for is cleart: both on your .sessions li. In addition to this, you'll probably want to add a bit of spacing between each event, which can be done by adding margin-top to the (rather complex) .sessions li:not(:first-of-type) .className selector. This ensures that the margin will be applied to all of the listings apart from the first one.
This can be seen in the following:
.smallTableContainer {
position: relative;
/*display: none;*/
height: auto;
overflow: hidden;
}
.weekdayHeader {
background: #bc4b51;
color: #efefef;
font-size: 18pt;
padding: 10px 0px;
}
.sessions {
padding: 0;
}
.sessions li {
clear: both;
}
.className {
float: left;
display: inline-block;
color: #1e1e1e;
font-size: 13pt;
padding-left: 10px;
}
.classTime {
float: right;
display: inline-block;
color: #1e1e1e;
font-size: 12pt;
padding-right: 10px;
}
.sessions li:not(:first-of-type) .className {
margin-top: 20px;
}
<div class="smallTableContainer">
<h3 class="weekdayHeader">Monday</h3>
<ul class="sessions">
<li>
<div class="className">
Warrior Cubs Kickboxing
<br>AGES 5-7
<br>[ SPACES AVAILABLE ] </div>
<div class="classTime">
<br> 16.15pm - 17.00pm
</div>
</li>
<li>
<div class="className">
Warrior Cubs Kickboxing
<br>AGES 8-12
<br>[ SPACES AVAILABLE ]
</div>
<div class="classTime">
<br> 17.00pm - 17.45pm
</div>
</li>
</ul>
</div>