Member Avatar for riya_developer

Hii...
I want that height of elements should be adjusted automatically at run time based on the size of element..
For that I have used Height : auto;
But it is not working...
So which property should I use?

Edited by riya_developer because: n/a
  • 3 Contributors
  • 4 Replies
  • 101 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by riya_developer

Dani AI

Generated

Short version: the parent element won’t grow when its children are taken out of normal flow (for example, floated or absolutely positioned). tried letting the element size itself and saw no change; correctly noted you normally don’t force a fixed height; and found a fix by making the parent contain its children. The reason is not the sizing rule itself but how child elements affect the parent’s flow.

When children are removed from normal flow the parent behaves as if they aren’t there, so automatic sizing appears to fail. The general approaches are: make the parent establish its own formatting context so it contains floats, explicitly clear the floats, or switch to a layout model that already sizes based on content (flex/grid).

Practical options:

  • Clearfix (works in all browsers):
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  • Modern single-line solution (creates a new formatting context):
.container {
  display: flow-root;
}
  • Use a layout that naturally expands (useful if you want flexible alignment too):
.parent {
  display: flex;
  flex-direction: column;
}

Troubleshooting tips: inspect child elements in DevTools to see if they are floated or positioned; try removing float/absolute temporarily to verify the parent then grows; check for collapsing margins between parent and first/last child. Adding an explicit clearing element after floated children also works but is less semantic than the clearfix or flow-root approaches. For most simple “parent not growing” cases the clearfix or flow-root methods are the safest, cross-browser options.

Recommended Answers

All 4 Replies

Member Avatar for carrieathomer

I assume you are using height in your DIV,

don't mention height. It will automatically adjust according to the contents.

But hard to suggest without seeing the css

Member Avatar for riya_developer

Ya I have used <div class="addWidget">
and in css .addWidget{ height:auto;}
And I also tried as u said...but no result...

Member Avatar for lps

Try add "overflow:hidden" to its wrapper container

Member Avatar for riya_developer

Thanx....It works....

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.