Vertical Allign Bottom in CSS

[oohoohoohooh]

hI, i'm working on a website and trying to make it without using tables (using CSS). If you visit the website below you will notice the navigation bar is positioned in the top right hand corner because the default vertical align is top. I managed to position it on the right but I also want to position it so it's directly above the navigation bar so there is no gap. I have been trying for a while now but with no success. If anyone could show me how I'd appreciate it. Thanks

Here's a link to the website:

http://www.star-buyer.com/

 

[Vragabond]

I believe you're applying 10px margin to your body element, which will create this gutter. If you do:

body {
  padding: 0;
  margin: 0;
}

the gap will disappear. I hope that is what you meant.

 

[ChrisHunt]

Vrag, I think he wants the tabs in the top right to sit on top of the yellow & blue line at the top of the main body.

The easiest way of doing it is to give the box-right div enough top-margin to push it down onto the top of the nav bar.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ChrisHunt]

erm, I mean [tt]margin-top[/tt]

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[oohoohoohooh]

Hi I tried:

#header .box_right {
float: right;
position: relative;
top: 29px;
}

but the problem comes when you increase/decrease font sizes since I use percentage font sizes.

I've uploaded the modified version for you to see.

http://www.star-buyer.com

 

[ChrisHunt]

Like I said, [tt]margin-top[/tt]:

#header .box_right {
    float: right;
    margin-top: 29px;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[oohoohoohooh]

Ah genius cheers. Worked a treat.