Member Avatar for jryans10

Hi,

I have a wrapper and 2 divs inside which make use of the float property.

When I put content inside one of the sub divs, the wrapper doesn't extend to the same size as the sub divs.

Hope you can understand this.

Any idea how to resolve this?

Many thanks.

  • 3 Contributors
  • 3 Replies
  • 81 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by jryans10

Dani AI

Generated

This started with a common layout problem: the inner boxes were not contributing to the parent container's height. and offered two pragmatic directions — change how the children are laid out, or make the parent establish its own layout context. Both are valid; choice should be guided by target browsers, whether you can change markup, and whether you want a modern layout system or a minimal compatibility fix.

Additional, practical options and tips:

  • For broad compatibility the micro clearfix pattern is a light, markup-free fix for containing floated children (see Nicolas Gallagher's explanation: micro clearfix).
  • Modern CSS also provides a simple option that forces the parent to contain its children without extra markup; see for details and support notes.
  • If redesigning layout, prefer Flexbox or Grid for predictable sizing and alignment; they avoid float-related containment issues entirely (Flexbox guide).
  • Watch for gotchas: inline-based layouts can create inter-item whitespace and baseline alignment shifts; containment techniques that rely on overflow can introduce scrollbars if content overflows slightly; margin collapse can also make heights look wrong.
  • Debugging approach: add temporary borders/backgrounds, inspect computed heights in DevTools, and try a small isolated example to confirm the containment method before applying it site-wide.

Recommended Answers

All 3 Replies

Member Avatar for hericles

By using float you are removing the sub div from being "inside" your wrapper. You can consider it to be "floating" on top. Because it has lifted out in this way the wrapper can't wrap itself around the div. Try replacing the float command with display:inline-block for the 2 divs - that should make them appear beside each other, which is what I think you were trying to achieve with the float.

Member Avatar for drjohn

Or just add overflow:auto to the wrapper's css. That usually makes it expand properly. Sometimes overflow:visible works too.

Member Avatar for jryans10

Thank you both very much, but I followed drjohn's advice and it works perfectly.

Thanks!

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.