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

Horizontal CSS list, last entry right-aligned?

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


P: n/a
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
Jun 27 '08 #2

P: n/a
URL to what you are trying....

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

http://www.cis.hut.fi/ntvuok/tmp/index.html
Jun 27 '08 #3

P: n/a
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
Jun 27 '08 #4

P: n/a
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...
Jun 27 '08 #5

P: n/a
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
Jun 27 '08 #6

P: n/a
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
Jun 27 '08 #7

P: n/a
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;
}
Jun 27 '08 #8

This discussion thread is closed

Replies have been disabled for this discussion.