Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post

    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:
    Code:
    <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:
    Code:
    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;}

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You'd need to adopt faux column approach.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    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%
    Last edited by Jahren; 11-10-2009 at 02:57 PM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Jahren (11-10-2009)

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    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

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts

    Maybe this will help

    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 might prove useful for you. I guess it is an .htc file meant to give IE :hover capability on elements other than links.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •