86

I have a <div> 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 <div>

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;
}
1
  • 1
    Neither Height:auto is working for me nor min-height: working for me, i am using mozilla firefox, latest version May 27, 2010 at 10:37

23 Answers 23

100

Just write "min-height: XXX;" And "overflow: hidden;" & you will be out of this problem Like this

min-height: 100px;
overflow: hidden;
6
  • Neat trick, thanks. One side question. Would this still work say if I bring in some more content to teh page using PHP or AJAX, will the page expands to fit the contents height?
    – Isuru
    Feb 23, 2013 at 18:50
  • 1
    I've been 10years doing this job and I've been all this time wondering to solve/prevent this! Thanks a million! May 9, 2014 at 19:08
  • It is my pleasure friends.
    – Adi
    May 12, 2014 at 13:43
  • 1
    I would love to understand the rationale of this counter-intuitive solution. How does CSS justify overflow: hidden; letting me see more of something? (In my case, without it, the containing block shrinks to its height, and content appears truncated at the bottom.)
    – Bob Stein
    Feb 2, 2017 at 15:27
  • 2
    Even this doesnt work for me. Setting min-height and/or overflow:hidden doesnt work for me. The div just doesnt expand.
    – Anupam
    Jul 12, 2017 at 4:58
51

Try with the following mark-up instead of directly specifying height:

.box-centerside {
  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
  float: left;
  min-height: 100px;
  width: 260px;
}
<div class="box-centerside">
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
</div>

6
  • 16
    if someone is still using ie6 its their own fault its broken... << I may think it but i still have to support that garbage... or at least the content has to survive....
    – WalterJ89
    May 27, 2010 at 10:21
  • 7
    I agree with Walterj89, however I also disagree - IE6 should be supported at least until IE9 comes out properly. In general I don't think anyone should support IE. May 27, 2010 at 10:27
  • 1
    Neither Height:auto is working for me nor min-height: working for me, i am using mozilla firefox, latest version May 27, 2010 at 10:42
  • This works fine on my FireFox 3.6 and IE8 - what version of FireFox are you running? May 27, 2010 at 10:57
  • I dont why but suddenly it gave me the output i needed.. thanx for ur help bud... May 27, 2010 at 11:25
21

Just write:

min-height: xxx;
overflow: hidden;

then div will automatically take the height of the content.

16

I've used the following in the DIV that needs to be resized:

overflow: hidden;
height: 1%;
14

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

height: fit-content;
9

just use following

height:auto;
3
  • Great answer, though unless there is a conflicting declaration higher in the tree, height will imply as auto by default. May 27, 2010 at 10:07
  • Neither Height:auto is working for me nor min-height: working for me, i am using mozilla firefox, latest version May 27, 2010 at 10:44
  • -ve that gives me vertical scrollbar, that i dont want May 27, 2010 at 11:07
9

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.

4

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.

3

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

1
  • Neither Height:auto is working for me nor min-height: working for me, i am using mozilla firefox, latest version May 27, 2010 at 10:44
3

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.

2

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...

1

Set a height to the last placeholder div.

    <div class="row" style="height:30px;">
    <!--placeholder to make the whole block has valid auto height-->
1
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.

1

I just used

overflow: hidden;

And it was worked for me properly. This div had some of float lefted divs.

1
  • Worked for me too. I combined it with height:auto; and display:block; Feb 28, 2019 at 0:54
1

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("../images/greybox-center-bg1.jpg") 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("../images/greybox-center-bg1.jpg") 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.

1

There is no need to set such as min-height any more, only set work well:

overflow: hidden
1
  • I was working with bootstrap Modal box and loading a form in it was breaking it. Now with your suggestion, I put overflow to scroll and it works awesome.
    – Umar Niazi
    Mar 18 at 7:20
0

<div> should expand automatically. I guess that the problem is that you're using fixed height:100px;, try replacing it with min-height:100px;

3
  • Neither Height:auto is working for me nor min-height: working for me, i am using mozilla firefox, latest version May 27, 2010 at 10:44
  • Like Neurofluxation said, you need to have . or # before box-centerside to match classes or IDs. At the moment, your code matches elements of node name box-centerside - of which none exists. May 27, 2010 at 10:46
  • I am aware of that this code has been copied from firebug hence not displayed with "." May 27, 2010 at 11:09
0

use min-height instead of height

0

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

0

height:59.55%;//First specify your height then make overflow auto overflow:auto;

0

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.

0

You Can Try Using fit-content This Works In Every Browser

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fit According To Div</title>

    <style>
        .test {
            /* Use This Code */
            width: fit-content;
            block-size: fit-content;
            /* You Can Also Try height: fit-content */
            height: auto;

            border-radius: 13px;
            border-style: solid;        
            overflow: auto;
            border-color: rgb(174, 174, 235);
        }
    </style>

</head>

<body>
    <div class="test" autofocus>
        <form>
            <script src="https://checkout.razorpay.com/v1/payment-button.js" data-  payment_button_id="pl_JfhYZeSvyVFaIf" async></script> 
        </form>
    </div>
</body>
</html>
0

The modern approach is using min-content/max-content. This will auth width/height based on the content.

width: min-content;
height: min-content;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.