CODEWITHSUNDEEP
htmlcss
ojek
ojek

Reputation: 10056

Div parent div not containing children div

I have something like this:

<div id="page">
  <---some content here -->
  <div id="container">
    <div id="child">
    </div>
  </div>
</div>

now, #page does not have any formatting in it. It works correctly for some content, i mean, when content is bigger, the #page has more height also. But, when today i applied #container in it, which is positioned absolute, and within it there is a #child which is positioned relative, it seems like #container is not within #page - that means if #container grows, height of #page is not changing, why?

Upvotes: 2

Views: 9268

Answers (4)

Lee Goddard
Lee Goddard

Reputation: 11173

Set overflow: auto (or to any other valid value) on the container.

Upvotes: 1

Andrea Ligios
Andrea Ligios

Reputation: 50193

Kevin's answer revealed the trick of (why is not possible the) autosizing.

For positioninig instead, note that if #container is absolute, and you want it to refer to #page, then #page should be relative, absolute or fixed , not static (the default).

Otherwise, the positioning would be referred to the HTML element / viewport, the visible area of the window.

Upvotes: 2

Marc B
Marc B

Reputation: 360572

.container is a css CLASS (as indicated by the .), e.g. in html it'd be

<div class="container">

You're using IDs, which in css are

#container { .... }

Upvotes: -1

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Absolutely positioned elements are removed from the normal flow of the document causing them not to increase the height of their parent if their height increases.

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. Full Text

Upvotes: 9

Related Questions