Horizontal Navigation became Vertical?

[TheCatapult]

Sorry for the topic title I used. I searched the Google but I just can't figure why it doesn't become horizontal. The problem is that the links gets separated in a way that the next link would be in another line, like the function of </br>. My goal would be that the next link would just be horizontally next by the previous link. Illustration Wrong: PartnersTerms and ConditionHelpdesk Right: Partners Terms and Condition Helpdesk Here's my code. mystle.css

#bodycss {background-image:url('Components/Images/div-backgrounds/back-web.png');background-repeat:no-repeat;background-attachment:fixed;background-position:center; }#wrapper{margin: 0 auto;width:768px;}.right{float:right}.left{float:left}.logo-banner{width768px;height:192px;background-image:url('Components/Images/header/banner.jpg');}.upper-navigation{width:768px;height:57px;}ul.uppernav{list-style-type:none;margin:0;padding:0;overflow:hidden;}ul.uppernav li{float:left;} ul.navvv{list-style-type:none;margin:0;padding:0;overflow:hidden;text-indent:0;}ul.navvv li{margin-bottom:-5px; padding: -10px -10px -10px -10px;text-color:ffffff;text-indent:0;} a.navvv{display:block;font-family:Arial;text-decoration:none;text-indent:0;} a.footer{display:block;font-family:Arial;;}.articles-left-nav{width:768px;height:554px;}	.articles	 {width:480px;	 height:554px;	 float:left;}a:link {text-decoration:none;font-family:"Arial";font-size:11pt;color:#000000;}	/* unvisited link */ a:visited {text-decoration:none;font-family:"Arial";font-size:11pt;color:#000000;} /* visited link */ a:hover {text-decoration:none;font-family:"Arial";font-size:11pt;color:#555555;}   /* mouse over link */a:active {text-decoration:none;font-family:"Arial";font-size:11pt;color:#000000;}  /* selected link */ 			   .articles-news-header			   {width:480px;				 height:37px;				 background-image:url('Components/Images/header/header-news.jpg');}				.articles-news-content			   {width:480px;				height:240px;				background-image:url('Components/Images/div-backgrounds/articles-back.png');padding-left:20px;}				 .articles-updates-header				{width:480px;				  height:37px;				  background-image:url('Components/Images/header/header-updates.jpg');}				.articles-updates-content			   {width:480px;				height:240px;				font-family: "Arial";font-size:11pt;				background-image:url('Components/Images/div-backgrounds/articles-back.png');padding-left:20px;}  .articles-about-header				{width:480px;				  height:37px;				  background-image:url('Components/Images/header/header-about.jpg');}		 .articles-about-content			   {width:480px;				height:517px;				font-family: "Arial";font-size:11pt;				background-image:url('Components/Images/div-backgrounds/articles-back.png');padding-left:20px;}.articles-download-header				{width:480px;				  height:37px;				  background-image:url('Components/Images/header/header-download.jpg');}		 .articles-download-content			   {width:480px;				height:517px;				font-family: "Arial";font-size:11pt;				background-image:url('Components/Images/div-backgrounds/articles-back.png');padding-left:20px;}.articles-guides-header				{width:480px;				  height:37px;				  background-image:url('Components/Images/header/header-guides.jpg');}		 .articles-guides-content			   {width:480px;				height:517px;				font-family: "Arial";font-size:11pt;				background-image:url('Components/Images/div-backgrounds/articles-back.png');padding-left:20px;}.articles-register-header				{width:480px;				  height:37px;				  background-image:url('Components/Images/header/header-register.jpg');}		 .articles-register-content			   {width:480px;				height:517px;				font-family: "Arial";font-size:11pt;				background-image:url('Components/Images/div-backgrounds/articles-back.png');padding-left:20px;}.articles-admin-header				{width:480px;				  height:37px;				  background-image:url('Components/Images/header/header-admin.jpg');}		 .articles-admin-content			   {width:480px;				height:240px;				font-family: "Arial";font-size:11pt;				background-image:url('Components/Images/div-backgrounds/articles-back.png');padding-left:20px;}.articles-gm-header				{width:480px;				  height:37px;				  background-image:url('Components/Images/header/header-gm.jpg');}		 .articles-gm-content			   {width:480px;				height:240px;				font-family: "Arial";font-size:11pt;				background-image:url('Components/Images/div-backgrounds/articles-back.png');padding-left:20px;}.articles-shop-header				{width:480px;				  height:37px;				  background-image:url('Components/Images/header/header-shop.jpg');}		 .articles-shop-content			   {width:480px;				height:517px;				font-family: "Arial";font-size:11pt;				background-image:url('Components/Images/div-backgrounds/articles-back.png');padding-left:20px;}.articles-vote-header				{width:480px;				  height:37px;				  background-image:url('Components/Images/header/header-vote.jpg');}		 .articles-vote-content			   {width:480px;				height:517px;				font-family: "Arial";font-size:11pt;				background-image:url('Components/Images/div-backgrounds/articles-back.png');padding-left:20px;}.gm-profile-content			   {float:right;width:500px;				height:180px;				font-family: "Arial";font-size:11pt;				background-image:url('Components/Images/div-backgrounds/back-gmeach.png');}	.leftnav	 {	 float:right;	  width:288px;	 height:414px;background-color:#ff00ff;padding:0;margin:0;text-indent:0;} 					   .subdiv-time						{width:288px;						  height:130px;						  background-image:url('Components/Images/div-backgrounds/back-time.jpg');  float:right;  font-family:Arial;  font-size:20pt;  font-color:gray;}.footer{float:left;width:768px;}ul.footer{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#00ff00;}ul.footer li{float:left;text-color:ffffff;}

index

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>GamingWeb</title><link rel="stylesheet" type="text/css" href="mystyle.css"></head><body id="bodycss"><div id="wrapper"><div class="logo-banner"></div><div class="upper-navigation"><ul class="uppernav"><li><a href="index.html"><img border="0" src="Components/Images/upper-navigation/nav-home.jpg" alt="Home" width="153" height="57"></a></li><li><a href="about.html"><img border="0" src="Components/Images/upper-navigation/nav-about.jpg" alt="About" width="153" height="57"></a></li><li><a href="download.html"><img border="0" src="Components/Images/upper-navigation/nav-download.jpg" alt="Download" width="153" height="57"></a></li><li><a href="forum"><img border="0" src="Components/Images/upper-navigation/nav-forum.jpg" alt="Home" width="153" height="57"></a></li><li><a href="guides.html"><img border="0" src="Components/Images/upper-navigation/nav-guides.jpg" alt="Home" width="153" height="57"></a></li></ul></div><div class="articles-left-nav">	<div class="articles">  	<div class="articles-news-header"></div>	<div class="articles-news-content"><!-- PHP CODE --><?$username="";$password="";$database="";mysql_connect("",$username,$password);@mysql_select_db($database) or die( "Unable to select database");$query="SELECT * FROM phpbb_topics  WHERE forum_id='4' ORDER BY topic_id  DESC LIMIT 10 ";$result=mysql_query($query);$num=mysql_numrows($result);mysql_close();?><?$i=0;while ($i < $num) {$id=mysql_result($result,$i,"topic_id");$forumid=mysql_result($result,$i,"forum_id");$title=mysql_result($result,$i,"topic_title");$content=mysql_result($result,$i,"post_text");$time=mysql_result($result,$i,"post_time");?><? echo '<a class="newscont" href="forum/viewtopic.php?f=4&t=' . $id . '">' . $title . '</a> <br/>'; ?>	<?$i++;}				?>    	</div>    	<div class="articles-updates-header"></div>  	<div class="articles-updates-content">There is no developments yet to be released.</div>  	</div>	<div class="leftnav"><ul class="navvv"><li><a href="register.html"><img border="0" src="Components/Images/left-navigation/nav-register.jpg" alt="Register" width="288" height="71"></a></li><li><a href="gmprofile.html"><img border="0" src="Components/Images/left-navigation/nav-gmprofile.jpg" alt="GM's Profiles" width="288" height="71"></a></li><li><a href="shop.html"><img border="0" src="Components/Images/left-navigation/nav-shop.jpg" alt="Cash Shop" width="288" height="71"></a></li><li><a href="vote.html"><img border="0" src="Components/Images/left-navigation/nav-vote.jpg" alt="Vote for us!" width="288" height="71"></a></li></ul><div class="subdiv-time"><script type="text/javascript">document.write ('Current time is: <span id="date-time">', new Date().toLocaleString(), '<\/span>.<\/p>')if (document.getElementById) onload = function () {setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)}</script> </div></div><div class="footer"><ul class="footer"><li class="footer"><a class="footer" href="partners.html">Partners</a></li><li class="footer"><a class="footer" href="partners.html">Terms and Condition</a></li><li class="footer"><a class="footer" href="partners.html">Helpdesk</a></li></ul></div></div> </div></body>

Thank you very much.

Edited April 9, 2013 by MisterCatapult

[dsonesuk]

You are still applying width of 768px to all elements using the class of 'footer'

.footer{float:left;width:768px;}

the .footer class on its own with float and width above, will still be applied to all elements using this class name below

ul.footer{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#00ff00;}ul.footer li{float:left;text-color:ffffff;}

Its just the ul and li will have specific styling because they target specific elements