Question

I’ve got a div with a class of ‘screenshot’ (in pink), and inside it is an image element and a heading element (in blue). As you can see in the image below; the h3 tag is not being contained by its fixed width parent. How can I contain the heading element inside the parent div so it’s width is the same? Specifying width, margin, padding etc. doesn’t work.

HTML:

<div class="screenshot"><a href="#">
<img src="img/vert_img1.png" alt="Image description">
<h3>Heading #1</h3>
</a>
</div>

CSS:

#screenshots .screenshot
{
    background: pink;
    width: 209px;
    margin: 2px;
    padding-bottom: 1px;
}

.screenshot a img
{
    width: 200px;
    height: 150px;
    margin-right: 0px;
}

.screenshot a h3
{
    background-color: blue;
    margin-bottom: 10px;
    text-align: center;
    width: 209px;
}

Answer 1

Does this demo fix the problem you have?

I have fixed the markup, as I notice that other comments have already highlighted, since it is not valid to have an h3 (or any block level element) inside an a.