CSS: Div Doesn’t Fully Expand in Height

I have written several small posts about commonly encountered problems while using DIV element. For example, arranging two or more DIVs side-by-side and vertically middle aligning text. Today, I will tell you about yet another problem that many web programmers face.

Let’s understand the problem with an example.

Create a DIV and let’s call it “wrapper-div”. Now create a DIV inside wrapper. Let’s call this second DIV as “inner-div”.

Now when you’ll add content to inner-div and its height will increase due to increasing content –the wrapper-div will not automatically expand to keep on wrapping the inner-div.

Are you facing a similar problem?

Many new programmers to CSS world feel baffled with this problem. Some of them, with hit and trial, figure out that if you float the wrapper DIV either to right or to left –it expands to the cover the inside DIV. But if you want your wrapper DIV to remain center aligned –the life becomes tough.

Solution is simple! Instead of float property you should use overflow:hidden in the style of wrapper DIV. For example:

<div id="wrapper-div" style="width:950px; overflow:hidden">
<div id="inner-div">
content comes here
content comes here
content comes here
content comes here
content comes here
</div>
</div>

With this styling, you will not be forced to float your DIV element to left of to right, and at the same time the wrapper div will automatically fully expand in height to cover the bloating inner content.

I hope this little piece of advice would be useful and save you some time in your busy work schedule. Do let me know if you face any problem while implementing the above solution. Thank you very much for using TechWelkin.