CSS 100% height problem

I'm working on a new template and I'm having 开发者_JAVA百科a 100% height issue, tried various style combinations but cant get it to work. Here is the link, the light beige area should extend below the end of the left content but it doesn't. What's messing my layout up? It's probably a clearing issue but how & where? Thanks.

that's because 100% is relative to the viewport, you want it to be relative to the document. you need to add an element and clear:both, after the page's div, and remove the height:100%

OK first off, you have four declarations for the stylesheets, they only need to appear once in the head section of your page.

What I suggest you do as an overall approach on div layouts is sketch out the containers you want with a 1 pixel coloured border, then, using firebug and firefox you can adjust the design to how you want dynamically and see how it behaves.

Once you have that down, refine it and add your images.