Convert image to html

I need to convert this image to html:

but I have bit of a block and can’t think of the best solution. The height should be 100%;. What I have done so far is to have the image/text at bottom as background of the footer and drag the footer up with a negative margin. Where I have doubts about is the sidebar (notice the 20px white border at the top and bottom). I was thinking to use One True Layout, which I know, is not the most popular method over here! What would be a better way of doing this?

Note the line around the image is only there to indicate the earlier mentioned top and bottom borders

Hi,

I would do it as a sticky footer version and use my absolute overlay technique similar to this example.

http://www.pmob.co.uk/temp/100-with-rightbar.htm

(The version above uses the slightly older sticky footer version so refer to the faq for the latest example that doesn’t use display:table)

I wouldn’t use the one true layout as it’s completely broken if in-page links are used.

Hi Paul, Thanks for the response. The negative top margin for the wrapper in your example(-100px). Should that represent the height of the header? 220px in my case

The negative top margin is usually the height of the sticky footer but the example I gave above has a wide header and footer which is unusual. I showed the example mainly to show the full height sidebar effect but the rest of the page can be like the normal sticky footer code.