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;

list-style: none;

#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;

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">
<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"/>


<div id="main">
<img src="graphics/logo.gif" alt="GazDee Games" width="191" height="91" /><br /> <br />
<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.
<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" />

<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>
<!--nav bar goes here i think --></div>

<br />


Any help would be be greatly appreciated.

10 Years
Discussion Span
Last Post by MattEvans

floating is calculated top-down:

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.