this is how it should look


this is how it currently looks:
http://uuilliam.net/rugsale

I could do margin-top:-number; but I am ideally wanting the website to be scalable therefore trying to use releative units as much as possible

that leads me to my second problem, the content area (the bit that is causing the side to be pushed down.) how would i make that stay at 100% ? i put height to 100% but it doesn't work.

I am ideally wanting the website to be scalable therefore trying to use releative units as much as possible

use em for the dimensions then

Doesn't em not just scale it to the size of the text I.E.
3em width would be
|MMM|
Meaning that someone viewing on a 800x600 screen will see it completely differently to someone with a 1366x768
I want it to look about the same on both(only fitting for the larger screen.)

em is a relative dimension, and browsers convert the value into pixels based on the client machines hardware capabilities. ALSO, using ems as the dimension allows ALL elements to "zoom" at the same rate.

If you want the pages to appear PRECISELY the same on any resolution set the layout to a fixed width 774 pixels wide (to allow for vertical scrollbars)

OR dimension every element in percentages that will alllow for the client browser window size which may or may not be the same as the screen resolution, as larger resolution users rarely have the browser set to full screen.

So while the screen may be at 1280px or 1600px wide the browser window (where the page is being displayed) may actually be at 900px or 1100px.