Can't get 100% Height to work on Wrapper. html, body and outer wrapper are at 100% need visible overflow

Solved : had to float the #main div, plus quite a lot of other major changes to the structure. But the coup-de-gras was the float.

The site in question can be viewed at http://thepremium.ca/amodestblog

Problem is I need the #main div to have a visible overflow in order to show the date divs that are -positioned to the left, outside the visible div.

If I set the overflow (which is currently hidden) I lose my background color because the div shrinks down to about 20px in height. 100% doesn't work.

I traced it back to a problem wit开发者_如何学编程h the #wrapper div which is also not taking to the 100% height which it is assigned, which isn't making a lot of sense because the #wrapper-background div it is inside is adopting the full height of the browser, along with and

Hopefully someone can come up with a solution to this one. Please view the source on the site itself, I've got too many different css files (using wordpress thematic theme) to put all the different css in here.

It's a bit of a hack, but you could change the ribbon-front div to fixed position and then use left and top to position the div where you want it.

.dateRibbon .ribbon-front {
  background-color: #84C036;
  height: 55px;
  position: fixed;
  width: 71px;
  z-index: 2;
  top: 50;   // You'd have to work out what the exact values should be.
  left: 70; 
}

Otherwise I'd restructure the page to ensure the date ribbon was not a child of the #main div.