Div height issue when adding more text in it

I created one DIV with some dynamic content where some its inner divs will float in right or left. Some this like below:

<div id=”UserInfoContainer”>
<div style=”float:left”>
Heading:
</div>
<div style=”float:right”>
User Info will go here.
</div>
</div>

We can’t add fixed height for UserInfoContainer, because user information is a dynamic content. Duo to this, UserInfoContainer’s background color is not fully added to the whole DIV.

Solution:

If you cleared the floated elements, then you can fit those DIV elements into the parent container. Just you need to do some thing below.

<div id=”UserInfoContainer”>
<div style=”float:left”>
Heading:
</div>
<div style=”float:right”>
User Info will go here.
</div>
<div style=”clear:both”></div>
</div>

Reference:
http://stackoverflow.com/questions/1287190/css-problem-my-div-tag-is-not-resizing-when-i-put-text-in-it

Related Articles

• Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites (smashingmagazine.com)
• Custom styling of the SELECT elements (cssglobe.com)
• CSS3 Fun (mo.notono.us)