xhtml/css navbar problems

I’m trying to teach myself xhtml/css, and the page I’m working on now has this code in the html:


<div class=“headimg”>
<a href=“ualc.html”><img src=“4_keys.jpg” alt=“Main”</a>

<h1><img src=“keyhole.jpg” /></h1>

“headimg” is a banner image that goes about three quarters of the page across, sitting to the left. To the right is the navbar, which is a vertical column of images (flags). I want the flags to go up to the top of the page, so that some of them are on a level with the “headimg” image, but I can’t get them to. The image isn’t actually as wide as the page, so I’m not sure why. Here is the css for the navbar:

div#navbar {
height: 0px;
width: 100%;
text-decoration: none;
margin-top: none;
float: right

a:link {
text-decoration: none;

a:hover {
text-decoration: none

img {
border: 0;

div#navbar ul {
margin: 0px;
padding: 0px;
font-family: tahoma, verdana, arial, sans-serif;
font-size: small;
color: #fff;
text-decoration: none;
line-height: 30px;

div#navbar li {
list-style-type: none;
margin-left: 810px;
margin-top: 0px;
text-decoration: none

Thanks for any help, and sorry if this question is dumb—I’m really just making it up as I go.

float the header image left and float the navbar right. Follow them with a clear ( <div style=“clear:both”></div> )if you don’t want anything underneath it to leak back up.

You don’t need to put div#navbar, you can just put #navbar. I’ve never seen that before but I don’t think it is part of the problem.

Nothing else is going to fit next to your navbar if it’s set to width: 100%. If the image is 3/4 the page, set the navbar to 25%.