Div does resize to height if child is positioned absolutely - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

Div does resize to height if child is positioned absolutely

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">
.ssImg {<!--   w w w.j a  v a  2  s .c  om-->
   width:100%;
}

.clr {
   clear:both;
}

#header {
   margin-top:0;
   background:Chartreuse;
   position:relative;
   width:100%;
   border:2pt solid yellow;
}

#logoWrapper {
   width:16%;
   min-width:121px;
   margin-left:11px;
   position:relative;
   bottom:-41px;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="row"> 
    <div class=".twelve.columns" id="header"> 
     <div id="logoWrapper"> 
      <img src="https://www.java2s.com/style/demo/Opera.png" class="ssImg"> 
      <div class="clr"></div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials