Div not expanding even with content inside

Question

I have a stack of divs inside of each other, all of which have an ID which specifies CSS only.

But for some reason the surrounding DIV tag only expands to it's anointed height value, and not it's default auto, meaning that although the content is inside, the backing DIV is only a specific height. I need it to adjust the heigh to the size of whatever is inside of it (As there will be user submitted data being echoed out possibly in paragraphs with 500+ words.)

#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>

Help is greatly appreciated.

Paul D. Waite · Answer 1 · 2012-04-17T09:05:06.543

114

Floated elements don’t take up any vertical space in their containing element.

All of your elements inside #albumhold are floated, apart from #albumhead, which doesn’t look like it’d take up much space.

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.

edited Apr 17 '12 at 09:05

answered Apr 25 '11 at 01:09

Paul D. Waite

96,640
56
199
270

@Brent: sure, there’s always the clipping to consider. I hadn’t thought about it producing issues with `box-shadow`, that’s a good point. – Paul D. Waite Apr 25 '11 at 10:04

score 20 · Answer 2 · answered Jan 30 '14 at 16:18

20

There are two solutions to fix this:

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

answered Jan 30 '14 at 16:18

Mahendra Liya

12,912
14
88
114

Your solution nr. 1 is a pretty neat fix for this/my issue. Especially while overflow: hidden wouldn´t be an option for me. +1 – christoph Nov 08 '17 at 19:05

score 10 · Answer 3 · edited May 23 '17 at 11:55

10

You probably need a clear fix.

Try this:

What methods of ‘clearfix’ can I use?

edited May 23 '17 at 11:55

Community

1
1

answered Apr 25 '11 at 01:05

sym3tri

3,747
1
29
25

score 7 · Answer 4 · answered Nov 04 '13 at 21:52

7

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

answered Nov 04 '13 at 21:52

Sébastien Gicquel

4,227
7
54
84

score 4 · Answer 5 · edited Oct 13 '12 at 21:32

4

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! ;-}

edited Oct 13 '12 at 21:32

McGarnagle

101,349
31
229
260

answered Oct 13 '12 at 21:27

Debbie

41
1

score 1 · Answer 6 · answered Apr 25 '11 at 01:05

1

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.

answered Apr 25 '11 at 01:05

Dan Blows

20,846
10
65
96

Hmm, so try a clearfix as mentioned by @sym3tri. My favourite is by Dan Cederholm. Add this, and a 'region' class to the albumhold div. `.clearfix:before, .region:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .region { zoom: 1; }` – Dan Blows Apr 25 '11 at 01:17

score 0 · Answer 7 · answered Jul 11 '13 at 17:42

0

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

answered Jul 11 '13 at 17:42

Axel Köhler

911
1
8
34

score -1 · Answer 8 · edited Apr 26 '19 at 21:26

-1

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

edited Apr 26 '19 at 21:26

PJ Brunet

3,615
40
37

answered Sep 11 '12 at 13:10

Mohamed Badr

59
1
8

11

Q:"Why won't my car start?" A:"You should take the bus" – Tzshand Jan 19 '17 at 00:23

Div not expanding even with content inside

8 Answers8

Linked

Related