css - Behavior of floated object when related element is missing -

<div class="pagination">     <?php if($page->hasprevvisible()): ?>     <span class="prev">         <em>previous article</em>         <a href="<?php echo $page->prevvisible()->url() ?>"><?php echo $page->prevvisible()->title() ?></a>     </span>     <?php endif ?>      <?php if($page->hasnextvisible()): ?>     <span class="next">         <em>next article</em>         <a href="<?php echo $page->nextvisible()->url() ?>"><?php echo $page->nextvisible()->title() ?></a>     </span>     <?php endif ?>   </div>  

this stands in article view, basically. there's main div, won't matter case , 2 spans within. when there's no next our previous article, option doesn't show up. 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 .pagination em because important me keep display:block there drop line. can't make .next align .prev without using float, goes 1 line down. maybe issue in em, don't know sure.

if there previous , next article, works charm. if there previous article stands perfectly, however, if there's solely next article, .next won't align properly.

for practical example, please take @ bottom of page.

your problem .pagination class not clearing 1 floated div in it.

if add overflow: auto; .pagination class in css, should fix 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 helps, , luck!