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?

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

> URL to what you are trying....

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

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

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

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

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;
}