Make a DIV to take the size of its content

I want to keep a record of those things of CSS that always drives me mad, and always forget and always have to do a search in Google to find the solution. Let's be honest, CSS is not one thing that us as developers love, it make me mad when i was developing some javascript controls and made me curse when i had to made some Internet Explorer 6 development. But when you start to understand it, you start to love it.

One of those things was how to make a %$"%$"##% < div > to take the size of its content.

This a simple div width inside another. Note how the black parent div takes automatically the full width of his container.

Child div:
100px width; 100px height

To force him to adjust to its content size, simply set this CSS properties on the parent div:
 width:auto; height:auto; position: absolute; 
 width:auto; height:auto; float:left; 
 display: inline-block; 
Child div:
width: 100px ; height 100px

The teory says that one div with width / height to auto will take the size of its content, and the position must be different to static or we the add a float property.