floated div, height 100, container fluid height

Question

I have this design which I cannot seem to get right, I would like .sidebar (float:left) to fill the entire height of .page-container which has a fluid height due to the content. How do I go about this?

Answer 1

Drop the margin-bottom and margin-left on .page-top and remove the margin-left from .sidebar. Once you do this, you have a lot of empty space at the top of .page-container but I don't understand your layout enough to comment on what to do about that; no offense, but you have a lot of empty <div> elements which I don't understand, and which are in turn causing you to abuse margins in my opinion, only making your layout harder to understand and work with.

Then you'll be ready to use the Faux columns trick described in the possible duplicate. The heart of the idea is .sidebar doesn't stretch all the way, but .page-container has a background which creates the impression it does.