We help IT Professionals succeed at work.
Get Started

CSS Div Position Issue

datzent83
datzent83 asked
on
9 Comments
1 Solution
229 Views
Last Modified: 2012-05-11
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

Comment
Watch Question
Commented:
This problem has been solved!
Unlock 1 Answer and 9 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE