Behavior of floated object when related element is missing - css

Question

<div class="pagination">
<?php if($page->hasPrevVisible()): ?>
<span class="prev">
<em>Previous Article</em>
<?php echo $page->prevVisible()->title() ?>
</span>
<?php endif ?>
<?php if($page->hasNextVisible()): ?>
<span class="next">
<em>Next Article</em>
<?php echo $page->nextVisible()->title() ?>
</span>
<?php endif ?>
</div>
This is what stands in my article view, basically. There's the main div, which won't matter for this case and two spans within. When there's no next our previous article, the option doesn't show up. Now to the CSS:
.pagination em {
font-family: Arvo;
font-size: .8em;
font-style: normal;
text-transform: uppercase;
display: block;
color: #838383;
}
.prev {
width: 49%;
display: inline-block;
}
.next {
width: 49%;
text-align: right;
float: right;
}
I've included the .pagination em because it is really important for me to keep that display:block there to drop a line. I can't make .next align with .prev without using float, it goes one line down. So maybe the issue is in the em, but I don't know for sure.
If there is a previous and a next article, it works like a charm. If there is only a previous article it also stands perfectly, however, if there's solely a next article, .next won't align properly.
For a practical example, please take a look at the bottom of this page.

Answer 1

Your problem is that your .pagination class is not clearing with only one floated div in it.
If you simply add overflow: auto; to the .pagination class in your CSS, it should fix the problem.
.pagination {
padding: 1.25em 0px;
font-size: 0.8em;
line-height: 1.2em;
border-bottom: 0.07143em solid rgb(55, 185, 81);
font-family: "Elena Web",Georgia;
overflow: auto;
}
Example: http://cssdesk.com/q2h4U
Hope this helps, and good luck!

Answer 2

float will float the element out of parent's "inner" dimension, which means its size will not be considered when calculating parent's size.
You can use display:inline-block on both sides, and use a dummy span when only one side is present:
http://jsfiddle.net/WR6cy/
<!-- when both sides present -->
<div class="pagination">
<span class="prev">
<em>Previous Article</em>
Previous Title
</span>
<span class="next">
<em>Next Article</em>
Next Title
</span>
</div>
<!-- when only prev side presents -->
<div class="pagination">
<span class="prev">
<em>Previous Article</em>
Previous Title
</span>
</div>
<!-- when only next side presents, use a dummy prev side to "push" the next -->
<div class="pagination">
<span class="prev">
</span>
<span class="next">
<em>Next Article</em>
Next Title
</span>
</div>
.prev {
width: 49%;
display: inline-block;
}
.next {
width: 49%;
text-align: right;
/* float: right;*/
display:inline-block;
}
Edit:
To achieve this with your current PHP, you can slightly modify it to:
<div class="pagination">
<span class="prev">
<?php if($page->hasPrevVisible()): ?>
<em>Previous Article</em>
<?php echo $page->prevVisible()->title() ?>
<?php endif ?>
</span>
<span class="next">
<?php if($page->hasNextVisible()): ?>
<em>Next Article</em>
<?php echo $page->nextVisible()->title() ?>
<?php endif ?>
</span>
</div>