Beholde størrelses forhold ved resizing af vindue

Jeg er nybegynder i CSS
På min gamle side havde jeg en tabel opbygning og pludselig fandt jeg på om ikke jeg kunne droppe tabellen og lave siden i CSS samt XHTML1 Strict.
Da jeg havde tabellerne blev indholdet automatisk gjort større og mindre dersom man resizede sit vindue, fordi størrelserne var sat i procenter.
Nu har jeg forsøgt det samme i CSS, men jeg har lidt problemer.
Jeg har et logo som jeg giver en størrelse og centrerer.
Herved bliver det hele tiden centreret og gjort større/mindre ved resizing.
Men så har jeg en menu hvor der er et baggrundsbillede.
Førhen lå den baggrund i en tabel med en given procents bredde/højde.
Hvordan gør man det i CSS uden brug af tabeller?
Min kode er følgende:
-----------------------------------------
stylesheet
-----------------------------------------
#logo
{
    position        : relative;
    left            : 10%;
}

#logo IMG
{
    position        : relative;
    height            : 20%;
    width            : 80%;
}

DIV.top
{
    position        : relative;
    left            : 10%;
      background        : url('ramme/links.gif') no-repeat;
      height            : 9%;
      width            : 80%;
}

DIV.top P
{
      text-align        : center;
      font-weight        : bold;
      padding-top        : 2%;
}
------------------------------------------
html
------------------------------------------
<div id="logo">
  <img src="ramme/top.gif" alt="FDF K.15" />
</div>
<div class="top">
  <p>Velkommen til FDF K.15´s hjemmeside.</p>
</div>
-------------------------------------------
Siden kan ses her "http://k15.dk/kopi/test.asp"
Hvis man gør vinduet mindre så ses at kun logoet ændrer størrelse men beholder sit forhold (hvis man kan sige det sådan)