내부 콘텐츠가 있어도 Div가 확장되지 않음

내부 콘텐츠가 있어도 Div가 확장되지 않음

---

서로 내부에 div 스택이 있으며 모두 CSS 만 지정하는 ID가 있습니다.

그러나 어떤 이유로 주변 DIV 태그는 기본 auto가 아니라 기름 부음 된 높이 값으로 만 확장됩니다. 즉, 콘텐츠가 내부에 있지만 백업 DIV는 특정 높이 일뿐입니다. 내부의 크기에 맞게 높이를 조정해야합니다 (사용자가 제출 한 데이터가 500 개 이상의 단어로 된 단락에서 반향 될 수 있으므로).

#albumhold {
  width: 920px;
  padding: 10px;
  height: auto;
  border: 1px solid #E1E1E1;
  margin-left: auto;
  margin-right: auto;
  background-color: #E1E1E1;
  background-image: url(../global-images/albumback.png);
  background-position: top center;
  background-repeat: repeat-x;
}

#albumpic {
  display: block;
  height: 110px;
  width: 110px;
  float: left;
  border: 1px solid #000;
}

#infohold {
  width: 800px;
  background-color: #CCC;
  float: right;
  height: 20px;
}

#albumhead {
  width: 800px;
  height: 20px;
  text-indent: 10px;
  border: 1px solid #000;
  color: #09F;
}

#albuminfo {
  margin-top: 5px;
  width: 800px;
  float: right;
  color: #09F;
  word-wrap: break-word;
}

<div id="albumhold">
  <div id="albumpic">Pic here</div>
  <div id="infohold">
    <div id="albumhead">Name | Date</div>
    <div id="albuminfo">Information</div>
  </div>
</div>

도움을 주시면 감사하겠습니다.

---

부동 요소는 포함 요소에서 수직 공간을 차지하지 않습니다.

를 #albumhold제외하고 내부의 모든 요소 는 플로팅 #albumhead되어 많은 공간을 차지하지 않는 것처럼 보입니다.

However, if you add overflow: hidden; to #albumhold (or some other CSS to clear floats inside it), it will expand its height to encompass its floated children.

---

There are two solutions to fix this:

1. Use clear:both after the last floated tag. This works good.
2. If you have fixed height for your div or clipping of content is fine, go with: overflow: hidden

---

You probably need a clear fix.

Try this:

What methods of ‘clearfix’ can I use?

---

Putting a <br clear="all" /> after the last floated div worked the best for me. Thanks to Brent Fiare & Paul Waite for the info that floated divs will not expand the height of the parent div! This has been driving me nuts! ;-}

---

Add <br style="clear: both" /> after the last floated div worked for me.

---

You have a fixed height on .infohold, so the .albumhold div will only add up to the height of .infohold (20px) + .albumpic (110px) plus any padding or margin which I haven't included there.

Try removing the fixed height on .infohold and see what happens.

---

You didn't typed the closingtag from the div with id="infohold.

---

div will not expand if it has other floating divs inside, so remove the float from the internal divs and it will expand.

ReferenceURL : https://stackoverflow.com/questions/5774315/div-not-expanding-even-with-content-inside