CSS Forum

**rRoberts** · 06:07 AM

Hi all

Newish to CSS so this might be an easy question.

I'm need a horizontal naviagtion that positioned on thr right inside a colored bar that streches the full width of the browser/container. I'm wrote this CSS which works finr until I use float:right and the navigation drops below the gray bar

Code:

<style type="text/css">
		#content {
			margin-top:50px;
			padding:10px;
			background-color:gray;
		}
		#nav{		
			display:inline;
			float:right;
		}
		#nav li{
			display:inline;
		}
		#nav a{
			padding:10px 5px 10px 5px;
			text-decoration:none;
			color:white;
		}
		#nav a:hover{
			background-color:white;
			color:gray;
		}
	</style>
</head>

<body>
	<div id="content">
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">FAQs</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>
</body>
</html>

this is an image of how the nav should look, but I need the nav floated over to the right while keeping the gray bar the full width of the window.

**chrishirst** · 11-24-2008, 06:18 AM

need a link to the page so we can see ALL the code. You can't debug pictures

lose the display:inline on #nav and give it a fixed width for a start.

**rRoberts** · 11-24-2008, 06:29 AM

I'm having problems with my server at the moment

this is all the code if you can help.

Code:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>
	<style type="text/css">
		#content {
			margin-top:50px;
			padding:10px;
			background-color:gray;
			}
			#nav{           
				width:600px;
				
			}
 			#nav li{
				display:inline;
			}
			#nav a{
				padding:10px 5px 10px 5px;
				text-decoration:none;
				color:white;
			}
			#nav a:hover{
				background-color:white;
				color:gray;
			}
	</style>
</head>

<body>
	<div id="content">
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">FAQs</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
    </div>
</body>
</html>

  </style>
</head>

**xpguy** · 06:59 AM

yeah we need to see the page so we can help otherwise we can't really do much, by default a widths are 100% unless specified. It looks like you need a clear however you can do this by giving the ul a height aswell but a clear works best.

**chrishirst** · 11-24-2008, 06:51 AM

posting the code is quicker than trying to explain

HTML Code:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>
	<style type="text/css">
		#content {
			margin-top:50px;
			padding:10px;
			background-color:gray;
			}
			#nav{           
				width:90%;
				float:right;
				list-style-type:none;
				text-align:right;
				background-color:gray;
			}
 			#nav li{
				display:inline;
			}
 			#content #clearnav{
				clear:both;
			}
			#nav a{
				padding:10px 5px 10px 5px;
				text-decoration:none;
				color:white;
			}
			#nav a:hover{
				background-color:white;
				color:gray;
			}
	</style>
</head>

<body>
	<div id="content">
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">FAQs</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
		<div id="clearnav"></div>
		
Content goes here
    </div>
</body>
</html>

  </style>
</head>