Home » Tutorials » HTML5/CSS3 » Div not Adjusting Height based on Content

Div not Adjusting Height based on Content

text over other text css

Have you ever wondered why your div height is not expanding with the content in it. For example if you have a dynamic, user generated text and you don’t know every time the exact height of the content, but below you have another div with relative position, then that might be a problem.  In this quick tip I will show you how to auto height div depending on content height.

That problem can also be caused by adding Javascript animated “Read more” button. When you expand it, the new text might appear over another valuable content and this might break the otherwise good looking design.

When I first had this issue, I’ve tried with min-height:100%, with height:auto and etc, but nothing worked. The only working solution for me was to add fixed height with big value, but that’s just solving the problem temporary.

You can see the problem here: http://jsfiddle.net/nhwuqLnn/

And the solution is very simple. Just add overflow:auto to the main div.

Advertisement

#company-info { min-height:320px; overflow:auto; } 

Floating the child element removes it from the document flow and the parent will collapse. By adding the overflow auto rule, the desired behavior is restored.

Of course in this example clear:both added to the last div can also solve the problem, but this is not exactly the issue.

Hope this quick tip was helpful. It did a good job for me in a more complex case.

About Georgi Dyulgerov

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

Check Also

a piece of css code

Margin 0 auto is not working

Very common problem nowadays is how to actually make margin: 0 auto; to work. You ...

Leave a Reply

Your email address will not be published. Required fields are marked *


Loading Facebook Comments ...