Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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.

like image 878
MezzanineLearner Avatar asked Dec 25 '22 00:12

MezzanineLearner


1 Answers

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

like image 53
Jeff Wolff Avatar answered Apr 09 '23 18:04

Jeff Wolff