100% container height issue - HTML5 / CSS2/3

Simple problem, though apparently not a simple solution.

Example here: http://myhideout.eu/new/

Basically the site consist of two columns, though with no wrappers or anything like it, as I'd really like to do with as little of the sort as possible, partly for the sake of simplicity, but also to make use of the HTML5 semantics, which in my mind don't really include divs, no matter how appropriately they are be named.

However, I'd like to have the sidebar fill up the full height of the adjacent column, which is not as easy as I first thought it would be. I know it's an old problem, but I was sure I had solved it before.

Anyhow, I tried to figure out how to do it without using wrappers or JavaScript. JavaScript is a no go, but that's another story. I was sure that there would be some sort of smart CSS3 feature or something similar, that would solve my problem, without the need for wrappers, but my search for this much need feature was a failure of epic proportions.

So I said to my self: "Damn it! Oh well, just have to use wrappers then."

I was sure it would work. I tried different configurations, but no matter what I did, I couldn't get it to work without setting an absolute height of the surrounding wrapper. Just imagine my disappointment, failing once again when I was sure I had done it before. So again I went searching for a solution to suit my needs. Though a lot more material turned up this time, it was still a failure. The few solutions I found was questionable to say the least.

So, now I'm here again, asking yet another one of those questions which undoubtedly have been asked a quadrillion times before. I am sorry about this, but I really don't know where else to go.

I do hope you can help.

Thanks in advance and best regards.

edit:

This works exactly as I want it too:



  
    
  
  
    
This is a header
This is the content



left



left
This is a footer

Only problem left is getting rid of that damn div tag ;)

edit: the css table display properties have been pointed out to me, and it really seems to be what I'm looking for, as the smart solution, but with multiple elements in one row, and only one in the other, I can't figure out how it should be done.

6
задан Zacariaz 20 May 2011 в 02:05
поделиться