CSS - div width depending on image size above

Answer 1

a Google search throws up the fact that this question has been asked a million times and that there is still no satisfactory way without attaching a width to the container

However...

This I think is a job best handled by the table element - the table element has a caption element which I would say is the tool for the job?

All browsers except IE6/7 handle the following bit of code well - IE6/7 handle it as far as the width goes, but it does not support the CSS caption-side property so it will not put the caption underneath the image - which may or may not be a problem - IMHO it will still look pretty (in those frames ;)) but YMMV, maybe an alternative if you really really don't want to script a width in

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.



 

CSS:

.content {
  float: left;
  padding: 20px;
  border: 2px solid #000;
}

.content table {
  border: 0;
  border-collapse: collpase;
}

.content td {
  padding: 0;
}

.content caption { 
  caption-side: bottom; 
}