Why is this div not breaking to the next line? - html

Question

I have a simple inner/outer div problem where it's probably easier to explain through pictures. Here is my issue:
The comment "This is a witty comment." is not breaking down underneath the other 2 labels. Here is my HTML:
<div class="commentOuter">
<div class="commentAuthor">someauthor</div>
<div class="commentDate">17 minutes ago</div>
<div class="commentText"><span>This is a witty comment.</span></div>
</div>
And here's the CSS:
.commentOuter
{
border-radius: 4px;
width: 100%;
height: 20px;
float: left;
background-color: black;
margin-top: 10px;
padding: 5px;
}
.commentAuthor
{
float: left;
font-size: smaller;
color: #68a5d9;
display: block;
height: 15px;
}
.commentDate
{
float: left;
font-size: smaller;
margin-left: 5px;
color: #AAA;
display: block;
height: 15px;
}
.commentText
{
display: block;
width: 100%;
}
I don't understand that when I highlight the element in the dev tools, the div is not showing to be underneath the labels, as seen in this pic:
Any help is much appreciated.

Answer 1

Because you floated the previous 2 elements. If you need to move it below. Use a clear:
.commentText
{
clear:both;
display: block;
width: 100%;
}
You also have to remove the specified height for the .outerComment element.
Just because it's not floated, doesn't mean it won't be next to other elements.
See more here: https://css-tricks.com/all-about-floats/