Tumblr captions overflow container

Question

So, I found a new theme for my tumblr blog, and it had a few issues, which I mostly managed to sort out, but now I'm facing a big one.

The captions, i.e. the comments and images below the content itself, are overflowing over the container that is set.

Here's the code I'm using http://freetexthost.com/abfqho3n5h

I've done some small changes to it, but nothing major or irreversible, that aren't shown here because this is the original code, so if you see some other major issue, feel free to tell me.

Here's an example of what happens http://two-dames.tumblr.com/post/121988188767/randomguy2015-because-tina-madqueenieb.

Answer 1

Add word-wrap: break-word to your posts class

.posts {
 width: 500px;
 background: #fff;
 color: #aaa;
 font-family: 'Gibson', sans-serif;
 font-size: 12px;
 margin-bottom: 20px;
 padding: 10px 10px 10px 10px;
 text-align: left;
 -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1)    inset;
 -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  word-wrap: break-word;
}

Edit
For your image you could define an img tag with a max-width: 100%; This makes sure the aspect ratio is preserved and scales the image down accordingly.

img {
    max-width: 100%;
}