Header image placement.

I want it in the top right corner.

[ajnorris]

I have a header div that contains all of my header elements. I have a logo image that is in the top left corner and I want to place an image in the top right corner. When I try to use float: right, it is too low, and when I tried to add a vertical align, it didn't change the position at all. Any help? If I haven't given enough info, let me know.

CSS:

#head
{
background-color: #fff;
color: #006;
margin-bottom: 80px;
}

#logo
{
margin: 0;
padding: 0;
position: relative;
top: 10px;
left: 10px;
}

#city
{
float: right;
vertical-align: top;
margin: 0;
padding: 0;
position: relative;
top: 10px;
left: 10px;
}

[BonRouge]

This may actually depend on the order of your divs in your html. Put the 'city' div before the 'logo' div and see what happens.

[ajnorris]

Thanks, that worked great! But now I have a new problem. When you make the browser window small, it pushes the logo down. So I figure I'll just make the logo positioned absolutely, but, whooops! That puts the city image down too low again! So what now?

[BonRouge]

You could float the logo left. Then you'd need a clearing div underneath them in order to give your header div some content (or you could just give your header some height).
A clearing div would look something like this :
<div class="clearer"></div>
and css :
.clearer {clear:both; height:1px; margin-top:-1px;}

Alternatively, you could give your header div width and height and position:relative and use absolute positioning for the images.

I hope this helps.

[ajnorris]

thanks so much for your help! It's looking a lot better now!