Help needed with floating nav bar css/html

I have a few problems with an assignment for university. Basicly my nav bar on the right is mean't to float but it is moving down with the text in the #main div in my code. What have i done wrong?

Here is my css code.

/* CSS Document */
body {
background-image: url(graphics/sfondo_black.jpg);
}

body {
margin: 20px 20px 0;
}

#main {
border: 1px solid #000;
background-image: url(graphics/sfondo_black.jpg);
}

/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */

#main #menu {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
float: right;
width: 230px;
background-image: url(graphics/sfondo_black.jpg);
margin: 0 0 10px 10px;
}

p, h1, pre, h2 {
margin: 0 10px 10px;
}

#nav{
list-style: none;
text-align:center;
}

#nav li {
border: 3px solid;
color: #F3C200;
margin: 0;
width: 180px;
}

#nav a:link {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
color: #FF0080;
text-decoration: none;
}

#nav a:hover {
color: yellow;
cursor: pointer;
}
p{ font-family:"Trebuchet MS", Verdana, Arial;
color:#FFFFFF;
size:14pt;
}

And here is my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome To GazDee Games</title>
<link rel="stylesheet" type="text/css" href="gazdee.css"/>

</head>
<body>

<div id="main">
<img src="graphics/logo.gif" alt="GazDee Games" width="191" height="91" /> 
<p>So does this work? I bloody well hope so otherwise I am going to get reall pissed off and can't really work out why this isn't working yet.
<center>
<img src="graphics/bottomnav.gif" alt="navlink" width="292" height="17" border="0" align="absbottom" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="0,2,56,15" href="home.html" />
<area shape="rect" coords="60,3,114,16" href="retro.html" />
<area shape="rect" coords="118,3,157,15" href="new.html" />
<area shape="rect" coords="161,4,202,15" href="kidz.html" />
<area shape="rect" coords="209,0,291,13" href="aboutus.html" />
</map>
</center>


<div id="menu">
<ul id="nav">
<li><a href="home.html">Home</a></li>
<li><a href="retro.html">Retro</a></li>
<li><a href="new.html">New Releases</a></li>
<li><a href="kidz.html">Kidz</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul> 
<!--nav bar goes here i think --></div>


</div>


</body>
</html>

Any help would be be greatly appreciated.

kained

Junior Poster

126 posts since May 2004

Reputation Points: 10

Solved Threads: 0

5 Years Ago

floating is calculated top-down:

<b></b>
<a style="float:left;"></a>
(from left-right/top-down, b will always come first)

<a style="float:left;"></a>
<b></b>
(from left-right/top-down, a will always come first)

if you want your navbar div to always be in the top left area, place its code before the main div code.

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

Help needed with floating nav bar css/html

This article has been dead for over three months