CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 240

Aligning text within progress bars

I'm trying to align some text to the left and the right within some progress bars, with the percent completed written on in writing on the right side, and the title of the subject on the left. I'm sure this is a simple fix, but I can't get the text over to the right while keeping some on the left, all on the same line.

I've tried aligning separate spans like this: 

<div class="progress" style="width:40%">
    <span class="subject">Subject One</span><span class="percent">40/100</span>
</div>

/* styles */
.subject { text-align: left; }
.percent { text-align: right; }

but it seems inline elements don't care about their text aligning. Yet when I make one of them block, it goes to separate lines.

Here's the code snippet:

ul {
  list-style-type: none;
}

li {
  width: 100%;
  border-bottom: 1px solid #ebebeb;
}

li .completion {
  background-color: #dbdbdb;
  padding: 20px;
}

.completion .subject {
  text-align: left;
}

.completion .percent {
  text-align: right;
}
<ul>
  <li>
    <div class="completion" style="width: 60%"><span class="subject">Thing One</span><span class="percent">60/100</span></div>
  </li>
  <li>
    <div class="completion" style="width: 40%"><span class="subject">Thing Two</span><span class="percent">40/100</span></div>
  </li>
</ul>

Any help is greatly appreciated! Thank you.

For clarification, i'd like the text to be aligned all the way to the right of the list item itself, not just within the completion div

Upvotes: 0

Views: 1707

Answers (2)

Carlo Cannas
Carlo Cannas

Reputation: 3262

If you want to align it all the way right you can use absolute positioning. Specify a relative positioning for the li elements, and absolute position for .percent, don't forget to place it at the right, so insert also right: 0. Add a right margin, if it's too close to the end of the bar.

Code snippet:

ul {
  list-style-type: none;
}

li {
  width: 100%;
  border-bottom: 1px solid #ebebeb;
  position: relative;
}

li .completion {
  background-color: #dbdbdb;
  padding: 20px;
}

.completion .subject {
  text-align: left;
}

.completion .percent {
  position: absolute;
  right: 0;
  margin-right: 20px;
}
<ul>
  <li>
    <div class="completion" style="width: 60%"><span class="subject">Thing One</span><span class="percent">60/100</span></div>
  </li>
  <li>
    <div class="completion" style="width: 40%"><span class="subject">Thing Two</span><span class="percent">40/100</span></div>
  </li>
</ul>

Upvotes: 1

Antonis Grigoriadis
Antonis Grigoriadis

Reputation: 2080

Use float:right on the second span and delete the align.

http://jsfiddle.net/U45XR/4/

EDIT: To align it all the way right you can use css positioning. Check this JSfiddle: http://jsfiddle.net/U45XR/5/.

Upvotes: 0

Related Questions