How do I keep a DIV from expanding to take up all available width?

Question

In the following HTML, I\'d like the frame around the image to be snug -- not to stretch out and take up all the available width in the parent container. I know there are a coup

Answer 1

Adding "float:left" to the span.pictureFrame selector fixes the problem as that's what "float:left" does :) Apart from everything else floating an element to the left will make it occupy only the space required by its contents. Any following block elements (the "p" for example) will float around the "floated" element. If you "clear" the float of the "p" it would follow the normal document flow thus going below span.pictureFrame. In fact you need "clear:left" as the element has been "float:left"-ed. For a more formal explanation you can check the CSS spec although it is beyond most people's comprehension.