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


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

(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.