DaniWeb IT Discussion Community - Replacing 100% tables with CSS

Hello, thanks for taking the time to read my query.

I've basically got a page (dark grey) with a panel that sits in it (light grey).. this fills the screen, except for a 16px gap around the edge which allowed the dark grey (from the body tag) to show through.

Easy with HTML4... <body leftmargin="16" topmargin="16" rightmargin="16" bottommargin="16" marginwidth="16" marginheight="16"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">.. this structure would give me what I wanted (obviously with colours added).

However I'm trying to reproduce this with transitional xhtml and css. Sooo I tried this in the CSS...

body{
background-color: #526B75;
background-repeat : repeat-x;
background-image: url(../images/top-background.gif);
font-family: arial, helvetica, geneva, verdana, sans-serif;
font-size: 12px;
font-weight: normal;
padding: 16px;
margin: 0px;

}

#holdall{
position:relative;
top: 0px;
left: 0px;
width:100%;
height:100%;
margin:0px;
padding:0px;
background-color: #DCE1E3;
}

and some xhtml that roughly boiled down equalled...<body><div id="holdall"> content</div></body>

However, although the light grey panel is displayed fine, the height is all wrong causing scroll bars to appear. I thought the CSS for the 'holdall' div being set to 'relative' would measure the height available within the 'body' tag but it appears not.

Does anybody have any ideas how to fix this or a different way of approaching this? I did an alternative way using javascript to redraw divs to the correct size and position.. but surely this isn't required.

Many thanks,
Meeesta