CSS Container Height

I have a layout that should have a sidebar on the right hand side of the content area. The sidebar should display 100% height of its container (#content), but for an unknown reason

Solution 1:

You are using height: 100% for all elements surrounding it, so it is inheriting the size from the html element. As it doesn't have any size specified, neither does any of the children relying on it.

Use this to make the html and body element fill the window:

html, body { height: 100%; }

Solution 2:

I made a few changes dealing with the positioning of the sidebar - which I changed to absolute and added a min-height so that if the contents of it were empty it would still be visible.

Link

Not sure if this is what you were looking for - but it might help.

Solution 3:

Set static height on your .content (in px) and you will see the sidebar

Solution 4:

Here is an answer from a layman: The problem is that you've got two child <div>s which are both floated, meaning they are outside the regular flow of the document. This causes them to be excluded from the height calculations of their parent, in this case, the <div> with class "content".

You may fix this by adding a <div> after those two floats with style "clear:both" (I believe). This is not the "best" way to fix this particular problem, as it is adding non-semantic markup to your page, but it is fairly easy to understand and implement. Cheers!

Edit: see Container div ignores height of floated elements and then follow the link in the answer to read more.