Horizontal CSS list, last entry right-aligned?

[vulpes]

Hi,

I have a horizontal css list and I'd like its last item to be aligned
to the right end
of the space given to the list. I can separate it from the rest with
margin-left: 10em, but that's very error-prone (different resolutions)
and
just doesn't look that good.

Using align: right doesn't work. Using float: right almost works.
The item is then right-aligned, but it's not in the list anymore but
one
line under it.

Anyone with an answer?

[Jonathan N. Little]

vulpes wrote:

Hi,

I have a horizontal css list and I'd like its last item to be aligned
to the right end
of the space given to the list. I can separate it from the rest with
margin-left: 10em, but that's very error-prone (different resolutions)
and
just doesn't look that good.

Using align: right doesn't work. Using float: right almost works.
The item is then right-aligned, but it's not in the list anymore but
one
line under it.

Anyone with an answer?

URL to what you are trying....

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[vulpes]

URL to what you are trying....

.... is (or better said a minimal example)

http://www.cis.hut.fi/ntvuok/tmp/index.html

[Jonathan N. Little]

vulpes wrote:

>URL to what you are trying....

... is (or better said a minimal example)

http://www.cis.hut.fi/ntvuok/tmp/index.html

Not perfect, works in gecko and Opera. IE7 needs a tweak for your
border. Fails in IE6 but so does your original. Your attempt at XHTML
isn't helping if you wan IE on board...reasons much discussed here...

#navlist {
background: #eee;
position: relative;
border-top: #ffa500 1px solid;
border-bottom: #ffa500 1px solid;
overflow: hidden; /* <- Add to contain floats */
}

#navlist li {
display: block; /* <- make floats to left */
float: left;
}

#navlist li a {
color: black;
text-decoration: none;
padding: 0 1em 0 1em;
}

#navlist li.current a {
background: #ddd;
}

#navlist li a:hover, #navlist li a:focus {
background: #d1e5fd;
}

#navlist li#rightAlign {
float: right; /* <- make last float to right */
}
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[vulpes]

Wow, many thanks to you!
I'll probably look at IE compatibility later on. The
site'll be non-commercial so as far as I care IE users
can burn, but others in the team might have other
opinions...

[Eric Lindsay]

In article
<13**********************************@a9g2000prl.g ooglegroups.com>,
vulpes <ni*********@tkk.fiwrote:

I have a horizontal css list and I'd like its last item to be aligned
to the right end
of the space given to the list. I can separate it from the rest with
margin-left: 10em, but that's very error-prone (different resolutions)
and
just doesn't look that good.

Using align: right doesn't work. Using float: right almost works.
The item is then right-aligned, but it's not in the list anymore but
one
line under it.

Anyone with an answer?

Float right inline can be made to work if the rightmost item actually
comes first in the list. It is taken out of the flow. There were some
positioning issues with Firefox.

See experiment http://ericlindsay.com/palmtop/palmnote.htm

--
http://www.ericlindsay.com

[dorayme]

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

Float right inline can be made to work if the rightmost item actually
comes first in the list. It is taken out of the flow. There were some
positioning issues with Firefox.

See experiment http://ericlindsay.com/palmtop/palmnote.htm

Yes, there is a difference with FF. Mentioned in these ngs from time to
time. Perhaps also see:

<http://netweaver.com.au/floatHouse/page5.html>

There are links to some appendices on this and, there, find further
links to screenshots for different browsers.

BTW, floats are always "taken out of the flow".

--
dorayme

[vulpes]

Actually I now found an even better solution myself. The problem with
Jonathan's solution was that it then eventually prevented any submenus
from showing. The following solutions works around this and should
be quite usable across browsers:

#navlist {
background: #eee;
position: relative;
border-top: #ffa500 1px solid;
border-bottom: #ffa500 1px solid;
}

#navlist li {
display: inline; /* Make list horizontal */
list-style-type: none;
}

#navlist li a {
color: black;
text-decoration: none;
padding: 0 1em 0 1em; /* Make entries 'airy' */
}

#navlist li.current a {
background: #ddd;
}

#navlist li a:hover, #navlist li a:focus {
background: #d1e5fd;
}

#navlist li#rightAlign {
position: absolute;
right: 0; /* Fit the entry right next to the end. */
}

/* Don't show any submenus for pages that don't have submenus. */
#navlist ul {
display: none;
}

/* The current submenu is shown. */
ul#currentSubnav {
display: block;
font-size: 90%;
position: absolute; /* Fit the submenu to the left border */
left: 0;
right: 0; /* Make the submenu span the whole width */
background: #ddd;
border-top: #ffa500 1px solid;
border-bottom: #ffa500 1px solid;
}

ul#currentSubnav li.current a {
background: #bbb;
}

ul#currentSubnav li a:hover, ul#currentSubnav li a:focus {
background: #fde5d1;
}