100% height again xD

Man I grow tired of this,
How can I set a height of 100% to a flaoting div?

I have a container with no fixed height.
in that container, a left div with no fixed height since I want it to grow with content.

and a right div that's always 100% height and should grow when left div grows.

I tried:
html:

<fieldset class="redaction_global_container">
<div class='redaction_contenu'>
test<br />
test<br />
test<br />
</div>
<div class='redaction_cours_panel'>test test</div>
<div class='clear'></div>
</fieldset>

css:


html,body{height:auto; min-height:100%;}
body{font-size:13px;font-family:Tw Cen MT,tahoma;background-color:#FFFFFF;padding:0px;margin:0px;height: 100%; width:100%;}
html {height: 100%; width:100%; margin: 0;padding: 0;}

.redaction_global_container{width:60%; position:relative; margin:10px auto 70px auto; padding:0; background-color:white; text-align:left; font-family:Tw Cen MT,tahoma;}
.redaction_marquise{position:fixed; background-color:#8A9738; width:100%; height:30px; bottom:0px; z-index:2;}
.redaction_contenu{width:70%; background-color:blue; margin:1%; float:left;}
.redaction_cours_panel{width:28%; height:100%; float:left; background-color:#CCCCCC; text-align:left;}

You'd need to adopt faux column (http://www.alistapart.com/articles/fauxcolumns/) approach.

oh yeah, i'll just do that, I lost that link for some reason :S
thanks

Oh, but what if I need to change the width of the right column?
it has to work like a side-panel.
while open it uses 35% width, and when minimized, its down to 5%

Check http://www.communitymx.com/content/article.cfm?cid=afc58

thanks again, great article.
I'll push the problem a little further, I need to place a "minimize" or "hide" button at mid-height of the right-panel. when minimized the button would change to "maximize" or "show" button. which is only a > or < in a circle :P Basic javascript. But hell CSS :S

What I have learned is that while it should be possible to do that in pure css, in practice it is not very practical because IE doesn't support :hover on anything but links and (this may just be ie6 and earlier?) it doesn't allow mouse actions on one element to effect other elements unless those other elements are children of the moused element. Some seriously messed up limitations to work around.

So if ie won't let :hover on a link effect other elements outside of the link, then maybe you would have to put the entire column/side panel inside the a element that was your show/hide button. You can put a span inside an a element and get around IEs limitations to some extent but what you are talking about may be pushing this type of trick beyond its scope.

It is easy to have elements effect other elements on mouse over and such just using DHTML or JS and we should be able to do all the same things with pure CSS but I guess IE is just not ready to let that happen just yet.

If you are not too concerned with validation you can put things like divs and other block elements in an a element and it will probably work fine in most browsers. Being able to do that can help work around IEs limitations considerably, but it won't validate because a is an inline element and according to spec only other inline elements can go inside it. So even though it may work I wouldn't recommend it.

I am very curious to know if there is some reliable, cross-browser, pure css solution to do what you are trying to do. I have searched high and low but not really found any realiable, pure CSS solution to have mouse actions on one element effect the appearance of other elements in a simple and robust manner. The sad thing is that it would be child's play if it weren't for IE.

Well I sure wish I had known about this last month when I was nesting backgrounds inside spans inside links just to get :hover to work on elements other than links in IE..

Anyway, now I know - and just in case you didn't Whatever:hover (http://www.xs4all.nl/~peterned/csshover.html) might prove useful for you. I guess it is an .htc file meant to give IE :hover capability on elements other than links.