CSS question -- center and right-aligned text

[oog]

Hello,

I would like to have a single line on my page with some short text in the center and some other short text on the far right. I can do this with a table with evenly balanced left and right column and leave the left column empty, but I would rather not introduce a table.

Is the only CSS option to set the top or padding-top property to a negative value?

Thanks!

 

[brentman]

I think absolute positioning would work, I've done that before. But its messy.

I also recall something about the float property that helps accomplish this. I think if you put the text in span tags with separate id's or classes (one float right and the other with no float but center alignment, or something like that) and just not break the line.

 

[fs5]

do you want absolute right or just right of the centered text?
you can use float and make a 2 column css layout (search the web).

 

[oog]

I ended up using relative positioning with a negative margin-top. I tried using float, but then the centered text was centered on the area to the left of the floated element, which shifted it slightly to the left. I didn't play with it more than that to try to figure out how to get the centering to ignore the width of the floated element. If anyone have any ideas on how to do that, I would be interested still.

 

[oog]

Originally posted by: fs5
do you want absolute right or just right of the centered text?
you can use float and make a 2 column css layout (search the web).

I want it right of the centered text, within the fixed width containing div. The centered text should be centered on that same containing div though, and not within the first column of a two column layout.

edit: If that's not clear, I want it to say "Page 1 of 4" in the center of the page and "Pages: 1 2 3 4" aligned to the right.

 

[fs5]

after 10 minutes of trying, it's unpossible 😱

 

[stndn]

Is this what you are trying to accomplish?


==============================
<div style="width: 100%;">
<div style="float: right;">Pages: 1 2 3 4</div>
<div style="text-align: center;">Page 1 of 4</div>
</div>
==============================

 

[fs5]

Originally posted by: stndn
Is this what you are trying to accomplish?


==============================
<div style="width: 100%;">
<div style="float: right;">Pages: 1 2 3 4</div>
<div style="text-align: center;">Page 1 of 4</div>
</div>
==============================

page 1 of 4 is not center aligned to the page.

 

[stndn]

Hmmmm.... let me try again:
(note: border added for illustration purpose)

======================
<div style="position: relative;">
<div style="text-align: center; border: 3px solid green;">Page 1 of 4</div>
<div style="position: absolute; right: 0; top: 0; border: 1px solid blue;">Page 1 2 3 4</div>
</div>
<div style="text-align: center; border: 3px solid green; position: absolute; width: 100%;">Page 1 of 4
<div style="position: absolute; right: 0; top: 0; border: 1px solid blue;">Page 1 2 3 4</div>
</div>
======================

Unfortunately, this doesn't work on both msie and mozilla.
The first case, MSIE will cause the 'Page 1 2 3 4' to go out of the green border, taking more than the space given to it
The second case, Mozilla will cause the overall page to go beyond the regular page, causing a scrolling horizontal bar to appear.

There's a better way of using class to override the rulesets to make them browser specifics. But i'm too lazy to think now, so maybe i'll leave it for the others to play with ,p

 

[oog]

i'd rather not have browser-specific rules, if i can help it.