Question

I have a container div it contains multiple floated divs I want a specific border div inside the container to have 90% height of the container itself however it doesn’t seem to detect the height of the container even though I’ve applied clear:both at the end of the container and also overflow:hidden to to the container div.

Answer 1

You can use this js script:

<script type="text/javascript">
    $(document).ready(function() {
        setHeight();
        $(window).resize(function() {
           $('.seperator2').css({ height: '50px'});
           setTimeout(function(){
              setHeight();
            },300);        
        });
   });
  function setHeight(){
     var contentH = $('.content').height();
     separatorH = parseFloat(contentH * 0.9);
     $('.seperator2').css({ height: separatorH });
  }
</script>

This script can be either in the head or at the very bottom of the page. Despite of the place, make sure first you link jQuery library.

NOTE: To linkjQuery library in the head(or elsewhere in the page), use the script bellow:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

EDIT: you can set the height of the element to 0 or remove it completely. Still I would probably leave it as height: 100;; this will force the page to look decent, before the script is executed.