i thought it would be simple however has turned south.. i am hoping somone on here can understand what i mean and fix it easily as I am lost... tried so many different things however just end up back to square one..
This is something CSS does not do well. It is hard, and not simple.
Some ideas that come to me:
Since you can't use the offset positioning (because you do not know the height of the content either), you might be stuck using display: table. The problems with that:
you'll need a "row" element to contain right and sidebar elements... though possibly #main could be this row element. #innerwrap would have to be the display: table element. Not sure what top-pad is doing since right wrap's already starting below the header and #content could just have top-padding that slides under #header anyway (same with footerpad)... so then right-wrap and content are the two children and are display: table-cell. They can vertically align a single block child (multiple, not sure).
Problem is IE6 and 7 though. You might be able to get away with a close-enough set of padding and heights to make the content and right wrap look "close" on "most" resolutions/screen sizes.
A real table
Possibly the other solution is a real HTML table, which naturally has display: table on it (also in IE). The table would have to be markup-simple (bare minimum) and would only be replacing innerwrap and all children. Top and bottom margin on the table would replace the padding divs. If this table takes place of innerwrap then it is still a direct child of the body element, who you've set to 100% along with html element, so (I've never tried this) you might be able to get away with setting a % height on the table.
This would change your source order: content would come before the "right" sidebar. A known disadvantage of layout tables. And you'd have to keep the markup very simple to avoid accessibility issues (two columns, one row, two table data cells (rightwrap and content)) with everything else remaining non-table markup.
If it weren't for IE6/7 I wouldn't consider using a table for layout, though then again this is a designer setup (whatever's in the header and footer had better be soooo important that I absolutely can't stand to free up my screen real estate and wait til I scroll to see them!) and is already a little bit overdone (though the only thing that's actually bad about it I think are the padding divs, unless there's a browser bug I don't know about preventing padding on #content from doing their work).