Member Avatar for ClaudiuCC 
<div class="container">

    <div class="title">title</div>
    
    <div class="content">
     	<div class="ajax dynamic repeatable content">ajax</div>
    </div>
    
</div>

title and content div's need to get inside the container. the container will auto-adjust to the height created by the title and content.

in my css there is no height limitations, only width.
title fits very well in the container, but the dynamic content won't fit in; it actually goes out of the container box. maybe because there's an ajax content that changes the size depending on the content ?

i'd appreciate some input on how to get the content inside the container as well.

Edited by ClaudiuCC because: n/a
  • 3 Contributors
  • 3 Replies
  • 102 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

Good call by (and the same suggestion from ) — the container was collapsing because the dynamic child was not participating in the parent�s normal flow. That commonly happens when inner elements are floated or absolutely positioned, or when injected AJAX content (images, widgets) finishes loading after the DOM snapshot used to size the parent.

Quick checklist to diagnose:

  • Are inner elements using float? Floats are removed from normal flow and the parent will collapse unless contained.
  • Are elements positioned absolute? Absolute children do not expand their parent.
  • Does AJAX insert images or content that load after insertion? Delayed media can make the parent appear to "not grow."

Safer alternatives to the inline overflow trick (so the container auto-sizes without unintended clipping):

/* clearfix: works in all browsers and contains floats */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* modern approach: create a block formatting context */
.container {
  display: flow-root;
}

If children are absolutely positioned but should still affect layout, remove absolute positioning or put position: relative on the parent and rework the child positioning. Avoid overflow: hidden if the child may visually overflow (dropdowns, shadows) — overflow: auto can add scrollbars, and hidden will clip content.

For AJAX that injects images, either supply width/height attributes or listen for image load events so layout recalculates. Use browser devtools to toggle borders/backgrounds and inspect computed layout to confirm which element is out of flow. Glad to see found the tip useful.

Recommended Answers

All 3 Replies

Member Avatar for ClaudiuCC

problem solved .. se below the solution

<div id="container">

    <div class="title">title</div>
    
    <div class="content" style="overflow:hidden;">
     	<div class="ajax dynamic repeatable content">ajax</div>
    </div>
    
</div>
Member Avatar for JRM

Why not add overflow:hidden to the content class?

Member Avatar for Member #334542

Thanks for the tip

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.