Move last span to the right side

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Rick Brandt - 27 Apr 2007 12:44 GMT

Sorry, I don't have a sample web page, but hopefully the crude illustration
below will suffice.

Given that the space within the dashed upper and lower lines is a div across the
entire width of the page and that the [-tab-] areas are spans that sit on the
left side of that div, is there a simple CSS way to make the "additional span"
be justified to the right side of the containing div?

I have been experimenting with different strategies and they all seem to have
major flaws (or not work at all). Many screw up the layout of the divs below
and using margins and such doesn't seem to get me anywhere without using
hard-coded widths on the elements.

---------------------------------------------------------------
[---tab---] [-tab-] [--tab--] [-tab-] (additional span)
---------------------------------------------------------------
(more divs in rest of page follow)

TIA

Reply to this Message

Ben C - 27 Apr 2007 14:21 GMT

> Sorry, I don't have a sample web page, but hopefully the crude
> illustration below will suffice.
[quoted text clipped - 4 lines]
> to make the "additional span" be justified to the right side of the
> containing div?

float: right

> I have been experimenting with different strategies and they all seem
> to have major flaws (or not work at all). Many screw up the layout of
> the divs below and using margins and such doesn't seem to get me
> anywhere without using hard-coded widths on the elements.

We do need a URL or a better explanation to help with that kind of
thing.

> ---------------------------------------------------------------
> [---tab---] [-tab-] [--tab--] [-tab-] (additional span)
> ---------------------------------------------------------------
> (more divs in rest of page follow)
>
> TIA

Reply to this Message

Rick Brandt - 27 Apr 2007 16:00 GMT

>> Sorry, I don't have a sample web page, but hopefully the crude
>> illustration below will suffice.
[quoted text clipped - 6 lines]
>
> float: right

Float right gave me...
---------------------------------------------------------------
[---tab---] [-tab-] [--tab--] [-tab-]
---------------------------------------------------------------
(additional span)

...and often the content after the floated span would end up off to the
right and off-screen. I am now using...

position: absolute;
right: 3px;

...and that is working pretty well. I didn't realize that absolute doesn't
affect the vertical position if you don't specify a top setting.

> We do need a URL or a better explanation to help with that kind of
> thing.

Sorry, I am on an intranet with no access to a public site.

Reply to this Message

Ben C - 27 Apr 2007 16:16 GMT

>>> Sorry, I don't have a sample web page, but hopefully the crude
>>> illustration below will suffice.
[quoted text clipped - 15 lines]
> ...and often the content after the floated span would end up off to the
> right and off-screen.

Yes that's a bug shared by both FF and IE7 ^H^H^H^H^H new de facto
standard.

The fix is to put the floated span _first_ in the content before any of
the [--tab--]s.

> I am now using...
>
[quoted text clipped - 3 lines]
> ...and that is working pretty well. I didn't realize that absolute doesn't
> affect the vertical position if you don't specify a top setting.

That's right, although you are relying on a part of the spec that says
that browsers are "free to make a guess" at that position. Safer to
specify top if you can.

Reply to this Message

Rick Brandt - 27 Apr 2007 16:51 GMT

> Yes that's a bug shared by both FF and IE7 ^H^H^H^H^H new de facto
> standard.
>
> The fix is to put the floated span _first_ in the content before any
> of the [--tab--]s.

Thanks; I'll do some testing with that.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / April 2007

Move last span to the right side