Make parent element fill the height of its absolute positioned content - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

Make parent element fill the height of its absolute positioned content

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
html,body {
   height:100%;
   padding:0;
   margin:0;
}

.container {<!-- w w  w .ja  v a  2s  .com-->
   background-color:Chartreuse;
}

.box {
   display:inline-block;
   width:100px;
   height:100px;
   margin-right:21px;
   background-color:yellow;
}

.box.one {
   margin-top:0;
   margin-bottom:161px;
}

.box.two {
   margin-top:81px;
   margin-bottom:81px;
}

.box.three {
   margin-top:161px;
   margin-bottom:0;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="box one"></div> 
   <div class="box two"></div> 
   <div class="box three"></div> 
  </div>  
 </body>
</html>

Related Tutorials