[pmwiki-users] CSS magic for right-aligned text on the same line? (progress-bar)

Patrick R. Michaud pmichaud at pobox.com
Wed Jan 25 12:53:58 CST 2006


On Wed, Jan 25, 2006 at 07:32:54PM +0100, christian.ridderstrom at gmail.com wrote:
> I've gotten things to float to the right, but I have a problem with the
> floats interfering with each other. See for instance
> 
> 	http://pmwiki.org/wiki/Test/Float
> 
> where 
> 
> 	* item 1 %rfloat% bla bla bla %%
> 	* item 2 %rfloat% bla bla bla %%
> 
> renders as follows (when viewed in an old Netscape, but not Opera)
> 
> 	* item 1				bla bla bla
> 	* item 2                     bla bla bla
> 
> What can I do about this? It looks fine on screen in Opera, but prints 
> badly. I assume that what is happening is that the floating objects 
> interfere with each other vertically, and to prevent them from being 
> displayed on top of each other they are positioned differently 
> horizontally. So I need to do some 'break' magic here I guess, but how?

'breaks' are probably going to make things worse.  
The issue is that "float:right" in CSS doesn't mean "right-justify",
it just means float as far as possible to the right without interfering
with anything else, and float downward only if there's not enough room.
Since there's plenty of space to the left of the first "bla bla bla",
the browser sticks it there and doesn't move it downward.

I think the sad truth in this case is that HTML and CSS aren't 
sufficiently powerful to do what you're wanting to do without lots 
of extra divs or tables.  Tables would likely be your best bet
in this case, or a custom markup that generates tables.

Pm





More information about the pmwiki-users mailing list