Strange css floating behaviour - css

Question

Why is the professor div not floating to the left? It is "hanging up" on the members container. The main container containing all of the red divs does not have a set height so the professor div has room to go to the left so to say. The divs are set to float left in case it wasn't apparent. I know what's wrong, How do I fix it?
<div id="displayEventInfoDiv">
<div class="eventInfoDiv">
<p id="infoClassTitle" class="eventInfoTitle">Class:</p>
<p id="infoClassP" class="eventInfoP"></p>
</div>
<div class="eventInfoDiv">
<p id="infoLocationTitle" class="eventInfoTitle">Location:</p>
<p id="infoLocationP" class="eventInfoP"></p>
</div>
<div class="eventInfoDiv">
<p id="infoTimeTitle" class="eventInfoTitle">Time:</p>
<p id="infoTimeP" class="eventInfoP"></p>
</div>
<div class="eventInfoDiv">
<p id="infoToolsTitle" class="eventInfoTitle">Tools:</p>
<p id="infoToolsP" class="eventInfoP"></p>
</div>
<div class="eventInfoDiv">
<p id="infoMessageTitle" class="eventInfoTitle">Message:</p>
<p id="infoMessageP" class="eventInfoP"></p>
</div>
<div class="eventInfoDiv">
<p id="infoMembersTitle" class="eventInfoTitle">Members:</p>
<p id="infoMembersP" class="eventInfoP"></p>
</div>
<div class="eventInfoDiv">
<p id="infoSectionTitle" class="eventInfoTitle">Section:</p>
<p id="infoSectionP" class="eventInfoP"></p>
</div>
<div class="eventInfoDiv">
<p id="infoNumberTitle" class="eventInfoTitle">Course Number:</p>
<p id="infoNumberP" class="eventInfoP"></p>
</div>
<div class="eventInfoDiv">
<p id="infoProfessorTitle" class="eventInfoTitle">Professor:</p>
<p id="infoProfessorP" class="eventInfoP"></p>
</div>
<button id="exitEventInfoDivButton">exit</button>
</div>
#displayEventInfoDiv // main container
{
position:absolute;
width:60%;
left:20%;
padding: 10px 10px 40px 10px;
background-color: rgba(0,0,0,0.7);;
border-radius: 10px;
display:none;
z-index: 30;
}
#exitEventInfoDivButton // exit button
{
position:absolute;
bottom:10px;
right:10px;
height:30px;
width:80px;
background-color: rgba(255,255,255,0.4);
font-size:20px;
color:black;
border-radius: 10px;
border:none;
outline:none;
font-family: 'Indie Flower', cursive;
cursor:pointer;
}
.eventInfoDiv // red div
{
width:200px;
float:left;
padding: 0 10px 0 10px;
background-color:red;
border:3px solid black;
}
.eventInfoTitle //titles
{
height:30px;
width:100%;
font-size:25px;
color:white;
text-align:center;
margin:0 0 20px 0;
}
.eventInfoP // info under titles
{
width:100%;
border-radius: 10px;
text-align:center;
font-size:20px;
background-color: rgba(255,255,255,0.4);
padding: 10px 0 10px 0;
}

Answer 1

I would either add an extra class to members to resize it properly, so you're Professor div is not sitting next to it because of float: left.
Or target you're professor div and set it to: clear:both
You can do this by using
<div class="eventInfoDiv professor">
<p id="infoProfessorTitle" class="eventInfoTitle">Professor:</p>
<p id="infoProfessorP" class="eventInfoP"></p>
</div>
.professor {
clear: both;
}