Snippets
DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Auto-Sizing DIVs

04.22.2005
| 57136 views |
  • submit to reddit 
        To have a <DIV> shrink and enlarge based on its content, use this CSS:


div.autosize { display: table; width: 1px; }
div.autosize > div { display: table-cell; }

In your HTML, enclose the <DIV> you want autosized in another <DIV> with class="autosize"

Before:


<div>
I want this to be auto sized!
</div>


After:


<div class="autosize">
<div>
I want this to be auto sized!
</div>
</div>


Tested in Firefox, Mozilla, Safari, Opera 7, and Internet Explorer 6.
"Starting from scratch" is seductive but disease ridden
-Pithy Advice for Programmers