Floating Without tables

[jcschott]

i am trying to make a menu so it goes all the way to the right of the screen in my header. I have an image to the left. I want the menu always to be at the right no matter what the user does to the screen. I have gotten the effect that i want but i had to use tables. I want to avoid using tables.


Here is the link to the webpage of the desired effect using tables: http://skonline.org/courses//support...2-diffmenu.htm

I have copied and pasted the parts of importance
div#header { margin-bottom: 0px; padding: 2px;
background-color: white;
background-image: url(airplane.gif);
position: relative; }

#header div#rightnav {
position: absolute;
right: 0;
top: 0;
width: 232px;
}

.header-title { background: transparent; padding-left: 7px; color: rgb(68, 34, 0);
vertical-align: middle; font-weight: bold; font-size: 180%; }

.header-rt-nav { width: 130px; margin: 0px; padding: 0px; border-left: 1px solid rgb(68, 34, 0);
border-right: 1px solid rgb(68, 34, 0);
vertical-align: middle; font-weight: bold; color: rgb(68, 34, 0); }
.header-rt-nav ul { margin: 0px; padding: 0px; font-size: medium; font-weight: bold;
color: rgb(68, 34, 0); line-height: 19px; white-space: nowrap; }
.header-rt-nav li { list-style-type: none; display: block; }
.header-rt-nav li a { padding: 1px 5px; text-decoration: none; color: rgb(68, 34, 0); }
.header-rt-nav li a:link { color: rgb(68, 34, 0); }
.header-rt-nav li a:visited { color: rgb(68, 34, 0); }
.header-rt-nav li a:hover { color: white; background-color: rgb(68, 34, 0); }

THanks!

[D3mon]

Using Float, set both the menus to float:right; and put them in order in your document from right to left.

[jcschott]

How do i get the image to stay always to the very left and the navigation always to the right

[D3mon]

you could set the image as the background of the header div using CSS. Then it will always be in the top left corner and your menus will always be in the top right corner.