I am try to code the navbar for the site i am making. In the navbar there is a logo on the left and buttons on the right. The code so far looks like this:
html:

    <div id="head">
         <div id="logo" />
      <div class="nav">
          <ul>
          <li><a href="http://gfxgrounds.com"><img src="images/home/home.gif" border="0" /></a></li>
          <li><a href="http://gfxgrounds.com/forums"><img src="images/home/forums.gif" border="0" /></a></li>
          <li><a href="#"><img src="images/home/tutorials.gif" border="0" /></a></li>
          <li><a href="#"><img src="images/home/affiliate.gif" border="0" /></a></li>
          <li><a href="#"><img src="images/home/aboutus.gif" border="0" /></a></li>
          <li><a href="#"><img src="images/home/contactus.gif" border="0" /></a></li>
        </ul>
      </div>
    </div>

CSS:

.body {background-image:url(images/home/bg.gif);
    background-repeat:repeat;
}

#head {background-image:url(images/home/navbg.gif);
    background-repeat:repeat-x;
    height:100px;
    width:auto;
    margin-left:auto;
    margin-right:auto;
}

#logo {background-image:url(images/home/logo.gif);
    background-repeat:no-repeat;
    float:left;
    height:100px;
    width:430px;
}

.nav {float:right;
    width:465px;
    height:100px;
}

.nav ul {padding:0;
    margin:0;
    list-style:none;
}

.nav li {float:left;
}

I am using Dreamweaver CS4 to code it. In dreamweaver everything looks as it should but then when I open the page in firefox the buttons are ontop of my logo and won't float right as i've told them to.

Can someone help me fix this?

Float right can cause a lot of problems. You should try separating the two and use a float left for both. You will also need to specify a width for both and not use auto.

i think you misunderstood the code. the width auto in my css is for the bar itself, with no logo and no buttons, just blank, and it stretches across the screen. so i don't see how changing that will affect my buttons

that bar is set in a div. inside that div i have two more divs, a logo and buttons. i set fixed dimensions for both of those and floated them to the appropriate sides of the screen.

the logo is on the left and the buttons are on the right.

but the buttons won't go right.

add float right to your nav ul

You've set your div to float right but not your UL. In addition to that, display:block to your logo would tighten things up.

If that doesn't fix it; a link to your page would be helpful.

Oh and Dreamweaver's layout view (or whatever it's called) is not known to be accurate.

Float right can cause a lot of problems.

Why ? It's no different than a float:left.

the width auto in my css is for the bar itself, with no logo and no buttons, just blank, and it stretches across the screen.

By default, if you don't define a width, then it's going to take up 100% of the horizontal space of it's parent anyway, so width:auto is rather pointless if that's all you're doing. However, if you're going to float an element, you MUST give it a width.

The nav won't go RIGHT because it's INSIDE the div with the logo, which you defined with a width of 430px. Where can it go if it's INSIDE the same space as the logo ??? Take it OUT of that div and it will go to the right inside of the #head div.

Originally Posted by LadynRed

The nav won't go RIGHT because it's INSIDE the div with the logo, .

oops. didn't notice that.

Eagle-eyed coders these days.

I've been a coder for a very long time...

i see what i did now thanks.

for my logo div it is like this:

<div id="logo" />

i tryed closing it normally as if i were putting something inside

<div id="logo">
</div>

and it fixed the problem. guess i just can't close a div like that.

No, you cannot close a div that way. The only time you use that method to close is for tags that do not have closing tags, such as the <img> tag or <br> and others. If an element has a proper closing tag, that is what you must use.

ok, will remember that thanks