CODEWITHSUNDEEP
htmlcss
MezzanineLearner
MezzanineLearner

Reputation: 299

Why is the absolute positioned DIV not inheriting the width of parent?

Why is the absolute positioned DIV not inheriting the width of its parent? Div has 

div {
  position: absolute;
  top:100px;
}

<html>
<body>
  <div>This DIV</div>
</body>
</html>

In static positioning the DIV takes all available space, in absolute the width of the DIV is as long as the length of its contents.

Upvotes: 5

Views: 13795

Answers (3)

Jacopo Brovida
Jacopo Brovida

Reputation: 465

Read @DaniP docs link for the answer.

Add style width : inherit for inheriting the width of its parent

#divParent{
  width:300px;
}


#divAbsolute {
  position: absolute;
  top:100px;
  background:red;
  width:inherit;
}
<html>
<body>
  <div id="divParent">
    <div id="divAbsolute">This DIV</div>
  </div>  
</body>
</html>

Upvotes: 3

mattstache
mattstache

Reputation: 135

Because absolutely positioned elements do not behave as block level elements and do not flow after each other like normal a div does.

absolute position affects width?

Upvotes: 4

Jeff Wolff
Jeff Wolff

Reputation: 51

The default width of a div is auto. It is automatically the width of the content inside. It does not inherit the width from the parent. To do this you need to specify inherit on the width of the div

div {
    position: absolute;
    top:100px;
    width: inherit;
}

http://codepen.io/anon/pen/BLPNrm

Upvotes: 4

Related Questions