floating lists to the right

[Andrew]

Hi

I've tried a number of techniques but this one is causing me to wonder
whether I'm going to have to go back to using tables to solve this:

I want to have some text aligned to the left and then on the same line a
menu constructed with a horizontal unordered list. Also the page where they
sit resizes to fit the browser window. Here's the xhtml:

<div id="navwrap">
<div id="navright">
<ul>
<li><a href="/admin.asp">Admin</a></li>
<li><a href="/">Projects</a></li>
<li><a href="/file_list.asp">File Manager</a></li>
<li><a href="/change_password.asp">Change Password</a></li>
<li><a href="/logout.asp">Logout</a></li>
</ul>
</div>

<div id="navleft">
<div class="CurrentUser">
user details
</div>
</div>
</div>

CSS:

div#navwrap {
margin: 0;
padding: 4px 8px;
background: #ccc;
height: 18px;
}

div#navleft {
background: #ccc;
}

div#navleft div.CurrentUser {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #111;
font-size: 10px;
padding: 2px 0;
}

div#navright {
background: #ccc;
float: right;
width: 45%;
}

div#navright ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}

div#navright ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

div#navright ul li a {
color: #000;
background: #ccc;
padding: 1px 6px;
border: 1px solid #ccc;
text-align: center;
text-decoration: none;
display: block;
line-height: 1.2em;
}

html>div#navright ul li a {
font-size: 11px;
}

div#navright ul li a:hover {
border-style: solid;
border-width: 1px;
border-color: #fff #333 #333 #fff;
}

div#navright a:active {
border-style: solid;
border-width: 1px;
border-color: #333 #fff #fff #333;
}

Because a floated element needs a width I give it a percentage. The menu is
constructed dynamically so I don't know what the exact width is so I can't
give it a width in pixels. Part of the problem seems to be with the
unordered lists. I have tried using div elements to wrap the menu buttons
but that doesn't seem to produce very good results and in any case it's not
very good structural xhtml in my opinion. Can anyone point me in the right
direction to help solve this problem?

Cheers
Andrew

[Spartanicus]

an************@orbnet.co.uk (Andrew) wrote:

[code snipped, an url would have been better]

Because a floated element needs a width
Currently yes, this is however an unnecessary restriction that is about
to be removed in css 2.1. It's still wise to assign a width to aid older
UAs like Opera 6, but you can get away with not specifying it in certain
circumstances.
The menu is
constructed dynamically so I don't know what the exact width is so I can't
give it a width in pixels.
Another method is to give it a width of "0", inline content will break
out of this zero width container, but older UAs like Opera 6 will still
be happy.
Part of the problem seems to be with the
unordered lists. I have tried using div elements to wrap the menu buttons
but that doesn't seem to produce very good results and in any case it's not
very good structural xhtml in my opinion. Can anyone point me in the right
direction to help solve this problem?

Align the list to the right by setting text-align:right on the container
div, and float the bit that should be positioned left.

Absolutely positioning the left aligned content with the containing div
set to display:relative is another method, but this doesn't work in IE.

--
Spartanicus

[Andrew]

Hi

See url this time:
http://test.empetus.co.uk

Align the list to the right by setting text-align:right on the container
div, and float the bit that should be positioned left.

I've tried this but although I get the desired effect in IE5.x/6 Opera
still won't be persuaded to stretch the list out horizontally. I'm
testing with the latest version of Opera:

Version 7.23
Build 3227
Platform Win32
System Windows 2000

I have a regular need to display content aligned both left and right
on the same line so a reasonable fix for this is going to be very
useful and mean I can stop using 2 table columns everytime I need to
do this.

Thanks again
Andrew

[Spartanicus]

an************@orbnet.co.uk (Andrew) wrote:

See url this time:
http://test.empetus.co.uk

Align the list to the right by setting text-align:right on the container
div, and float the bit that should be positioned left.

I've tried this but although I get the desired effect in IE5.x/6 Opera
still won't be persuaded to stretch the list out horizontally. I'm
testing with the latest version of Opera:

You need to nest the list and the left floated content in the same div.

One of my pages that uses a navbar with left and right alignment using a
list and float: http://www.pan-europe.utvinternet.ie/

--
Spartanicus