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 attached the css and copy 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!

[mwinter]

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.

A laudable goal, and fairly simple: absolutely position the two lists relative to the containing div. That is, the container should have the declaration

position: relative;

applied to it so that the absolutely positioned elements will use it as a reference.

The "Introduction" list should be positioned approximately 7em from the right. It will probably be slightly more unless you position the right-most list flush against the right edge.

The title, "Sophomore Literature" should be a level-one heading, and your current level-three header, "Unit 1, Course Introduction", should be level-two. To make sure the positioned lists don't sit above the level-one heading when the viewport is narrow, place a right margin on the header. It should be about 14em; 7em plus the position from the right assigned to the "Introduction" list.

On the subject of headings, don't skip levels just to get a certain look - use the correct element and style it as needed. Similarly don't use empty paragraphs or non-breaking spaces to simulate margins or padding. Use margins and padding!

Mike