HTML/CSS - Right and left align on the same line?

Answer 1

Add display:inline; to your .details class and make sure the containing div is a block element and its background is set to gray.

Sinan.

Answer 2

I did it this way:

<style type="text/css">
#right {
    float: right;
}

.details {
    margin: 0 auto;
    line-height: 0;
}
</style>

<p class="details"><a href="#Top">To Top</a></p>
<p id="right" class="details">Latest Version:  0.3.6.17 | Downloads: 12 | <a href="#">Download</a></p>

The tricky part is that you have to zero out the top and bottom margins for both AND the line-height. If you do this, then floating right on the bottom element lines up.

Answer 3

This diverges a bit from what you started with, but has been how I've done this in the past:

CSS:

.details {
  clear: both;
  padding: 7px 15px;
  margin: 20px 15px 15px 15px;
  background: #111111;
  text-align: right;
}

.toplink {
  float: left;
}

HTML:

<div class="details">
  <span class="toplink">To Top</span>
  Latest Version:  0.3.6.17 | Downloads: 12 | Download
</div>