Member Avatar for bwallace

How do you make a div expand or collapse to fit the amount of content in it? For example, we have this page which has too much space at the bottom when you first enter, then when you click an option it has too little. (Please excuse any oddities in the wording of the page; we've uploaded the script but haven't fixed all the text.) I read before that you can't change div height like that, but I'm pretty sure I've seen websites do it.

Edited by bwallace because: n/a
  • 3 Contributors
  • 5 Replies
  • 143 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by bwallace

Dani AI

Generated

Short summary: the page layout was collapsing because child elements were being taken out of normal flow (floats) and the parent didn't reliably size to the content. correctly pointed to letting the container size itself; showed a script approach; and confirmed a containment/height tweak fixed several pages. For a stable, future‑proof fix, contain floats or use modern layout methods rather than relying on fragile hacks.

Practical options to try (pick one that fits your markup):

  • Make the container establish a block formatting context so it contains floated children.
.container {
  display: flow-root;
}
  • Or create a BFC with overflow if you need broader browser support:
.container {
  overflow: auto;
}
  • Use Flexbox for layouts that need stretching and predictable vertical sizing; this avoids floats entirely:
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1 0 auto;
}

Troubleshooting checklist: inspect the computed heights in devtools; look for floated children whose heights are not contributing to the parent; remember percentage min-heights require the parent to have an explicit height; watch for margin collapse between adjacent blocks; ensure images have loaded or use intrinsic sizing so they don't later change height. For background reading on why floats escape their parent and how BFCs work, see MDN: Block formatting context and for modern layout patterns, see MDN: Flexbox.

Applying one of the containment methods above will make the content area expand and contract predictably without JavaScript.

Recommended Answers

All 5 Replies

Member Avatar for shaya4207

You need to position all your divs relatively to each other, and have the main div (I believe it was called div2) 'height: auto;', that should work...

Member Avatar for pritaeas

Something like this ?

Member Avatar for shaya4207

Something like this ?

There's no reason to have to go to jQuery for something that can be done easily with CSS...

commented: My bad... +7
Member Avatar for pritaeas

Very true. Posted too quickly after reading his first line...

Member Avatar for bwallace

Thanks! I needed to do a lot to clean up the style sheet, but I think what really fixed it was:

- float div2 left (it contains two divs, one floated left and the other floated right)
- set "min-height: 100%" for div2
- set "clear: both" for div3

We haven't yet fixed the page I mentioned in the original post, but the home page of the site and some others.

Edited by bwallace because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.