CSS question – middle and right-aligned text [question center] [left column]

Q: Hi, would like

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

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

Thanks!


The Three Money Raising Questions
Re:i'd rather not have browser-specific rules, if i can help it.

52 Model Questions For Bible Teachers.
Re: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


50 Home Business Clarity Questions
Re:Originally posted by: guy
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.


Cfa Study Notes, Practice Questions
Re: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>
==============================


Social Media Coaching Center
Re:after 10 minutes of trying, it's unpossible :o

Gold Standard Trivia Pub Quiz Questions and Answers
Re:Originally posted by: guy
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.


24 Questions Equally Yoked in Thought and Deed
Re: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.

Website Automation Center
Re: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).

Secret Shopping Center
Re: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.


Related posts

Leave a comment

0 Comments.

Leave a Reply


click to changeSecurity Code

[ Ctrl + Enter ]