div does not resize to height if child is positioned absolutly

Question

I have an image inside a DIV. I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image. How can I do this?

the HTML

      <div class=".twelve.columns" id="header">
        <div id="logoWrapper">
                <img src="https://nbson.com/sni/images/logo.png" class="ssImg">
                <div class="clr"></div>
        </div>      
      </div>

the CSS

.ssImg{
    width:100%;
}
.clr{
    clear:both;
}
#header{
     margin-top:0;
     background:#000;    
     position:relative;
     width:100%;
     border:1pt solid pink; 
}

JSFiddle

If you want to put two classes on an element use like `
`, not like `
`. — connexo, Dec 14 '16 at 22:14

score 2 · Accepted Answer · edited May 23 '17 at 10:30

Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents. If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]

To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.

.ssImg{
 width:100%;
}
.clr{
 clear:both;
}
#header{
  margin-top:0;
  background:#000;  
  position:relative;a
  width:100%;
  border:1pt solid pink; 
}

#logoWrapper{
 width:15%;
 min-width:120px;
 margin-left:10px;
 position:relative; /* this is new */
        bottom: -40px; /* this is new */
}

<div class="twelve columns" id="header">
    <div id="logoWrapper">
            <img src="https://nbson.com/sni/images/logo.png" class="ssImg">
            <div class="clr"></div>
    </div>      
</div>

score 1 · Answer 2 · answered Dec 14 '16 at 22:31

How about this?

html, body {   
  height: 100%;
  padding: 20px;
}

.ssImg{
   width: 100%;
}

#header{
  background-color: #000;  
  position: relative;
  width: 100%;
  height: 100%; /* Set the height what you want */
  border: 1pt solid pink; 
}

#logoWrapper{
  width: 15%;
  min-width: 120px;
  position: absolute;
  top: -15px;
  left: -25px;
}

<div id="header">
  <div id="logoWrapper">
    <img src="https://nbson.com/sni/images/logo.png" class="ssImg">
  </div>      
</div>

score 0 · Answer 3 · answered Dec 14 '16 at 22:18

First of all:

If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">

Secondly, regarding your question:

Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.

You can solve it by explicitly setting the height and width you need on the element.

div does not resize to height if child is positioned absolutly

3 Answers3