How to auto adjust the div height according to content in it

Question

I have a  lt div gt  which needs to be auto adjusted according to the content in it   How can I do this   Right now my content is coming out of the  lt div gt   The class I have used for the div is as follows  box-centerside    background url     images greybox-center-bg1 jpg   repeat-x scroll center top transparent  float left  height 100px  width 260px

User · Answer

You could try  div tag will auto fit height with content inside    height  fit-content

User · Answer

Just write   min-height  xxx  overflow  hidden    then div will automatically take the height of the content

User · Answer

height 59 55    First specify your height then make overflow auto overflow auto

User · Answer

Simple answer is to use overflow  hidden and min-height  x any  px which will auto-adjust the size of div   The height  auto won t work

User · Answer

I just used   overflow  hidden    And it was worked for me properly  This div had some of float lefted divs

User · Answer

I have fixed my issue by setting the position of the element inside a div to relative

User · Answer

I ve used the following in the DIV that needs to be resized   overflow  hidden  height  1

User · Answer

For me after trying everything the below css worked   float  left  width  800px    Try in chrome by inspecting element before putting it in css file

User · Answer

Don t set height  Use min-height and max-height instead

User · Answer

If you haven t gotten the answer yet  your  float left   is messing up what you want   In your HTML create a container below your closing tags that have floating applied   For this container  include this as your style    container   clear both      Done

User · Answer

Set a height to the last placeholder div          lt div class  row  style  height 30px   gt       lt  --placeholder to make the whole block has valid auto height-- gt

User · Answer

Most of these are great answers  but I feel that they are leaving out one inevitable aspect of web-development which is the on-going page update  What if you want to come and add content to this div  Should you always come to adjust the div min-height  Well  whilst trying to answer these two questions  I tried out the following code instead   box-centerside     background  url  quot    images greybox-center-bg1 jpg quot   repeat-x scroll center top transparent    float  left    height  auto     adjusts height container element according to content      width  260px      furthermore  just for a sort of bonus   if you have elements around this div with properties like position  relative    they would consequently stack on top of this div  because it has property float  left  To avoid such stacking  I tried the following code   parent     display  grid    grid-template-columns  repeat 3  1fr      number depends on how many columns you want for a particular screen width       height  auto     adjusts height container element according to content        box-centerside     background  url  quot    images greybox-center-bg1 jpg quot   repeat-x scroll center top transparent    height  auto     adjusts height container element according to content      width  100       sibling 1        Code here        sibling 2        Code here       My opinion is that  I find this grid method of displaying more fitting for a responsive website  Otherwise  there are many ways of achieving the same goals  But some of the important goals of programming are to make coding simpler and more readable as well as easier to understand

User · Answer

use min-height instead of height

User · Answer

lt div gt  should expand automatically  I guess that the problem is that you re using fixed height 100px   try replacing it with min-height 100px

User · Answer

Min- Height    some Value  units     ---- Use only this incase of elements where you cannot use overflow  like tooltip  Else you can use overflow property or min-height according to your need

User · Answer

Just write  min-height  XXX   And  overflow  hidden    amp  you will be out of this problem Like this  min-height  100px  overflow  hidden

User · Answer

just use following  height auto

User · Answer

I have made some reach to do auto adjust of height for my project and I think I found a solution   CSS      overflow  auto      overflow-x  hidden      overflow-y  hidden    This can be attached to prime div  e g  warpper  but not to body or html cause the page will not scroll down  in your css file and inherited by other child classes and write into them overflow  inherit  attribute   Notice  Odd thing is that my netbeans 7 2 1 IDE highlight overflow  inherit  as Unexpected value token inherit but all modern browser read this attribute fine   This solution work very well into   firefox 18  chorme 24  ie 9  opera 12    I do not test it on previous versions of those browsers  If someone will check it  it will be nice

User · Answer

Try with the following mark-up instead of directly specifying height    x000D   x000D   box-centerside   x000D    background  url     images greybox-center-bg1 jpg   repeat-x scroll center top transparent  x000D    float  left  x000D    min-height  100px  x000D    width  260px  x000D    x000D   lt div class  box-centerside  gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D    This is sample content lt br gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

simply set the height to auto  that should fix the problem  because div are block elements so they stretch out to full width and height of any element contained in it  if height set to auto not working then simple don t add the height  it should adjust and make sure that the div is not inheriting any height from it s parent element as well

[css] How to auto adjust the <div> height according to content in it?

Examples related to css

Examples related to html