By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,085 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

Move last span to the right side

P: n/a
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
Apr 27 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On 2007-04-27, Rick Brandt <ri*********@hotmail.comwrote:
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?
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

Apr 27 '07 #2

P: n/a
Ben C wrote:
On 2007-04-27, Rick Brandt <ri*********@hotmail.comwrote:
>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?

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.
Apr 27 '07 #3

P: n/a
On 2007-04-27, Rick Brandt <ri*********@hotmail.comwrote:
Ben C wrote:
>On 2007-04-27, Rick Brandt <ri*********@hotmail.comwrote:
>>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?

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.
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...

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.
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.
Apr 27 '07 #4

P: n/a
Ben C wrote:
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.
Apr 27 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.