CODEWITHSUNDEEP
htmlcss
Kadjia
Kadjia

Reputation: 97

Container div does not expand to fit child div (without floats)

My container div does not expand to fit its child div - which has a top: 20px value. I don't even have floats and have used both overflow:hidden (cuts part of the child div) or overflow:auto (creates scrollbars).

See codepen example: Codepen

<div class="container">
<div id="model">fdsf</div>
</div>

Appreciate any solutions to this problem.

Upvotes: 2

Views: 611

Answers (2)

Roope
Roope

Reputation: 4507

1) In your example, the container is expanding to fit the child div correctly. The height of the child is 100px plus two times the border of 1px, in total 102px. Then, the height of the container is exactly 102px, as the developer tools in any browser can tell you.

Height of the contents totals 102px, thus the inner height of the container is 102px. This is by definition "expanding to fit the contents".

2) Now, you are setting position: relative for your child div. The following quote from Mozilla Developer Network should give a complete explanation to what is happening in your example.

Relative positioning:

This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

3) Obviously, you can get rid of this effect by getting rid of relative positioning, and just using margin instead. Regarding your comment, no, top, right, bottom, and left should absolutely not work. They are meant to be used for a totally different thing, for what the quote above explains.

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Remove top and position properties and use margin: 10px auto 0 auto;

#model {
  background: yellow;
  border: 1px solid orange;
  width: 100px;
  height: 100px;
  margin: 10px auto 0 auto;
  display: block;
}

Demo

Upvotes: 1

Related Questions