Search code examples
htmlcsscontainers

I want the collapse behavior of my container block


I spent hours searching the solution of this issue. All i found is the inverse of the desired behavior. As the title says, what i want is that my '' container collapse and get no height when it have the property 'position:fixed' This is the code block.

<div style="position:fixed;right:0;bottom:0">
    <div style="float:left">First DIV</div>
    <div style="float:left">Second DIV</div>
</div>

Thank you


Solution

  • I think i have the response of the problem. I put a middle container between the main container and the elements that have an absolute position. The code became :

    <div id="main_container">
      <div id="middle_container">
        <div class="element">First DIV</div>
        <div class="element">Second DIV</div>
        ...
      </div>
    </div>
    
    
    #main_container{
    position : fixed;
    right : 0;
    bottom : 0;
    }
    #middle_container{
    position : absolute;
    right : 0;
    bottom: 0;
    }
    .element{
    float : left;
    }
    

    Thanks all for your responses. And sorry for the problem description clarity.