How do I change the size of my article depending on an image?

Question

I've just created some articles in an HTML5 file. Those articles contain images. The articles also have a border at the bottom. Now I have this problem that whenever you re-size your window to make it larger, the images go outside the border. I want the border to re-size with the image.

Here's an example of how an article looks like in my page:

<article>
  <p>
    <img image />
  </p>
  <p>
    text
  </p>
</article>

The p-tag with the image inside floats left, the p-tag with text floats right next to it.

To be more clear: I want the article tag to resize to the height of the image.

Answer 1

Just guessing, without seeing a working example or any of your CSS, but adding overflow: auto to the article element will cause it to contain its floated children:

article  {
  overflow: auto;
}

Example that may or may not relate to the CSS we can't see: http://codepen.io/paulroub/pen/opnfG