Aligning 3 texts (left, center and right) in a DIV

Question

I am trying to make a sort of progress bar that gets filled, with text inside that is on the left, in the center, and SOMETIMES on the right.

I got it (almost) working, my only issue so far is that sometimes the text in the middle gets too long, and so it gets spanned out of the div. Meaning it wraps around, and takes sort of 2 lines, but there is still place in the main div.

This is the code, maybe someone can help me fix this and improve it a little:

<div class="progress progressSize">
    <div style="width: 50%;" class="progressFill"></div>
    <div class="progressText">
        <span class="leftText">Left Text</span>
        <span class="centerText">Center text that gets too long</span>
        <span class="rightText">Right Text</span>
    </div>
</div>

And for the CSS:

.progress {
    border: 1px solid #004b91;  
    background-color: #FFFFFF;
    position: relative;
}

.progressSize {
    width: 500px;
    height: 20px;
}

.progressFill {
    background-color: #EAF3FE;
    height: 100%;
    position: absolute;
}

.progressText {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    position: relative;
}

.leftText {
    float: left;
    width: 33%;
}

.centerText {
    float: left;
    text-align: center;
    width: 33%;
}

.rightText {
    float: right;
    text-align: right;
}

So my issue is with the centerText. The text in the middle is too big, so it spans 2 lines, but it's not big enough to fill the whole bar. Because I reserve 33% for each: left, center and right text, the center text is placed in the middle but it has like a "bound".

I am not sure how to fix that. Could anyone please help me?

Thank you,

Rudy

Answer 1

An alternative to using float for this issue is to use absolute and relative positioning, I've found-- I'm in a situation where I need to do this without float and this has helped me solve my issue.

http://www.bennadel.com/blog/2541-most-css-floats-can-be-replaced-with-relative-and-absolute-positioning.htm

Answer 2

Maybe overflow:hidden in combination with height:1em would help? This will crop the text that is too long.

.centerText {
  float: left;
  text-align: center;
  width: 33%;
  overflow:hidden;
  height: 1em;
}

Answer 3

Your procressSize CSS should be:

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

This will increase the height of the progress div to contain the text

Edit but if you want the div height to remain the same, don't have the width:33% for the centerText div and keep the progressSize CSS the way i have mentioned

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

.centerText {
    float: left;
    text-align: center;
    min-width: 33%; // initially, width:33%
    height:auto;
}

The min-width is just a minimum-width so that the div does not shrink below 33% (But it will not work in IE6)