Shrink-wrap to content: CSS experiment

Each DIV has default width and coral background color. A double border is used to show shrink-wrapping around content. Floating causes shrink-wrapping in IE5+ and Mozilla. Wrapping can also be faked in the same browsers with a SPAN. The background color is shown to highlight difference in behavior. Note that the background color extends the full implicit width of a DIV in the last example, indicating that inlining content only gives the illusion of shrink-wrapping when the DIV background is the same as its parent container.

Shrink-wrap with floated DIV


Shrink-wrap with floated SPAN in DIV



Shrink-wrap by inlining content in block

Standards Reference: CSS2.1 Floating, non-replaced elements

« Examples page