I've spent two days now attempting to resolve a fig/figcation issue to no avail.
I have a Django application where users are able to submit images and I'm using the figure and figcaption tags to display the image with an accompanying caption. The main issue is that the caption width exceeds the picture width.
I'm trying to figure out a way for the image to remain the same size and the caption to line up in width accordingly. I'm using Twitter-Bootstrap as well. I'm open to all solutions. Any input, experience or advice greatly appreciated.
UPDATED: This is the actual HTML template code and CSS:
<div class="span4 offset2">
{% if story.pic %}
<h2>Image</h2>
<figure width="{{story.pic.width_field}}">
<img class="image"src="{{ story.pic.url }}" width="{{story.pic.width_field}}" alt="some_image_alt_text"/>
{% if story.caption %}
<figcaption>
{{story.caption}}
</figcaption>
{% endif %}
</figure>
{% endif %}
</div>
image {height:auto;}
figure {margin:0; display:table;}
figcaption {display:table-row;
max-width: 30%;
font-weight: bold;}