Having an issue aligning text inside a element to the left when there is another element below it

Question

I am seeing an odd issue where the text inside the contentDescription doesn't align to the left on the last sentence. Here is an image of the issue I notice. Example. As you can see the text "some planet" is not aligned to the left as I expect it to be.

Is this because of the saidBy element that is below it? Also, this behavior is very inconsistent as sometimes it aligns to the left properly, depending on the length of the text.

I tried applying the text-align: left; but that didn't work.

Here is my code:

.mainBody{
  width: 570px;
}
.saidBy{
   margin-top: 22px;
   float: left;
}

<div class="mainBody">
    <div class="content">
        <blockquote class="contentDescription">A planet is a large object that orbits a star and has enough gravity to be spherical and clear its orbit of smaller objects. Here are some facts about some planet
            <cite class="saidBy">
                —From National Aeronautics and Space Administration
            </cite>
        </blockquote>
    </div>
</div>

Answer 1

It is weird, I agree. If you replace float: left; by display: block; it seems to behave like you want.

The reason the floated element pushes on the last line of the quote, is that it is part of the quote. It wants to be left, so there's no other place for the last line to go.

.mainBody{
  width: 570px;
}
.saidBy{
   margin-top: 22px;
   display: block;
}

<div class="mainBody">
    <div class="content">
        <blockquote class="contentDescription">A planet is a large object that orbits a star and has enough gravity to be spherical and clear its orbit of smaller objects. Here are some facts about some planet
            <cite class="saidBy">
                —From National Aeronautics and Space Administration
            </cite>
        </blockquote>
    </div>
</div>

As a block the citation takes up the whole width of the <div> and has a working top margin.

See: Block and inline layout in normal flow