troubleshooting Question

CSS Div Position Issue

Avatar of datzent83
datzent83Flag for United States of America asked on
CSS
9 Comments1 Solution230 ViewsLast Modified:
In the following code, how do I make it look like the screenshot? I can't seem to position the DIV to the right side. Image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="css/mainStyles.css" />


<style>

/* These styles create the dropdown menus. */
#navbar {
   	margin: 0;
   	padding-top: 40px;
   	height: 1em;
   	float: right; 
   	width: 900px;
}
   
#navbar li {
   	list-style: none;
   	float: left; 
}

#navbar li a {
   	display: block;
	padding-right: 8px;
   	background-color: #fff;
   	color: #000;
   	text-decoration: none;
   	text-align: left; 
}
   
#navbar li ul {
   	display: none; 
   	width: 10em; /* Width to help Opera out */
   	background-color: #fff;
   	font-size: .9em;
}

#headerAccount {
	float: right;
	padding-top: 40px;
}

#navbar li ul li {
   	font-size: .8em;
   	padding-top: 8px;
}
   
#navbar li:hover ul, #navbar li.hover ul {
   	display: block;
   	position: absolute;
   	margin: 0;
   	padding: 0; 
}
   
#navbar li:hover li, #navbar li.hover li {
   	float: none; 
}
   
#navbar li:hover li a, #navbar li.hover li a {
   	background-color: #fff;
   	border-bottom: 1px solid #fff;
   	color: #000; 
}
   
#navbar li li a:hover {
   	background-color: #fff;
   	color: #ff8c00;
}
</style>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

</head>
<body>
					<td id="navCell">
						<ul id="navbar">
      						<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
         					<li><a href="#">Home&nbsp;&nbsp;</a></li>
         					<li><a href="#">Info&nbsp;&nbsp;</a>
         						<ul>
            						<li><a href="#">Sub 1</a></li>
            						<li><a href="#">Sub 2</a></li>
            					</ul>
         					</li>
         					<li><a href="#">Help</a>
            					<ul>
               						<li><a href="#">Sub 1</a></li>
               						<li><a href="#">Sub 2</a></li>
               						<li><a href="#">Sub 3</a></li>
               					</ul>         
         					</li>
      					</ul>
      					<div id="headerAccount">
         					|&nbsp; Hi <a href="#" class="orrangeFont">Joe</a> (2
							<a href="#"><img class="evelope" alt="" height="13" src="images/evelope.gif" width="21" /></a>)
						</div>
					</td>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
SSupreme

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 9 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros