✕
Share it

Contact me
iPhone / iPad

Tools

Hindi Proof Reader Top Tech Blogs in India QR Code Generator
Make Money Online Earn from Blogging More Tools MS-Excel MS-Word AdSense About Lalit Contact us
TechWelkin Site Logo

TechWelkin

Tips and Tutorials on Computers, Mobiles and Internet

Last updated: 7 February 2015

CSS: Div Doesn’t Fully Expand in Height

March 10, 2012 By Lalit Kumar 1 Comment

Learn what to do when the wrapper div does not automatically expand according to the height of the inside DIV element.




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.

The Problem

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.

The Solution

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.

Related Articles for More Information:

  1. Place two DIVs side by side
  2. Creating table with a name specified by a variable
Last updated: 7 February 2015 | Published on: 10 March 2012 | Authored and Edited by: Lalit Kumar and Team | Filed as: Home » Tips and Tricks » CSS: Div Doesn’t Fully Expand in Height

Filed Under: Tips and Tricks

Lalit Kumar is the Principal Author and Founder of TechWelkin. He is a web explorer and he enjoys finding useful information on the Internet. He loves to put things together to create a bigger solution. Lalit is passionate about technology, languages and literature. You can contact Lalit via email (techwelkin [at] gmail [dot] com) or Facebook (facebook.com/techwelkin).

Comments

  1. Dan Unawatuna says

    September 8, 2012 at 11:53 am

    You are a champion. Thank you so much.

    Reply

Leave a Reply Cancel reply

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

banner of the book 'Vitamin Zindagi'

Recent Stories

  • Cool Instagram Usernames for Girls and Boys
  • Best Custom Robots.txt File for Blogger/Blogspot
  • Check Ticket Confirmation PNR Status on WhatsApp
  • Easily Capture Screen and Do Recording on iPhone / iPad
  • Consistent Video Upload is Important for YouTube Channel
  • Conditions for YouTube Channel Monetization
  • How to Get Your First 100 and 1000 Subscribers on YouTube
  • What is the Average Audience Retention for YouTube Channels?

Tools

  • Hindi Proof Reader
  • Top Tech Blogs in India
  • QR Code Generator
  • Random Word Generator
  • Strong Password Generator
  • Trace Mobile Numbers

Connect with us

  • Facebook
  • Google+
  • Twitter
  • LinkedIn
  • Pinterest
  • RSS Feed

© 2007-2019 TechWelkin.
The content is copyrighted to Lalit Kumar and may not be reproduced on other websites.
TechWelkin displays Google AdSense ads. See how Google uses data when you're on TechWelkin | Privacy Policy