banner positioning question

[Finn]

I am attempting to position a banner ad in a header in the upper right position. Floating right is not having the expected effect. You can see the ad here: cafepharma.com/drupe (the leaderboard ad in the header).

The original position of the navbar (along the top of the header) seems to be causing the problem. However, I can't find anything that is causing the banner to be pushed down.

[Paul O'B]

Hi,

Your banner is at the top of#header and as far right as it can be.

If you are talking about the small gap above the header then that's where your menu lives.

You have moved the menu below the header using relative positioning and a relatively positioned element is not actually moved at all! It only appears to be somewhere else but as far as all elements on the page are concerned the elements is where it originally was and they will react accordingly. This is what relative positioning means

When you move an element with relative positioning it is only moved visually but not physically. The space it originally occupied is always preserved.

If you want to remove it from the flow then use absolute positioning and apply some padding to the bottom of the header to protect it.

#menu
{
  color:#fff;
  font-size:1.2em;
  font-weight:normal;
  height:20px;
  position: absolute;
  top: 114px;
  line-height:1.3em;
  letter-spacing:1px;
  margin: 0;
  padding:0;
  white-space:nowrap;

}
#header{padding-bottom:20px;}

[Finn]

That helps a lot. Thanks!